html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

* {
    margin: 0;
    padding: 0;
}

body {

    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: #E6E1DE !important;
}
td,th{
        font-family: 'Noto Sans Arabic', sans-serif;
         border-collapse: collapse; /* Ensure borders are collapsed */
    border: 1px solid #E6E1DE !important;
}
/* Existing styles... */

.custom-table {
    background-color: #E6E1DE !important;
    border-collapse: collapse; /* Ensure borders are collapsed */
    border: 1px solid #E6E1DE !important;
}

.custom-table th,
.custom-table td {
    background-color: #E6E1DE !important;
 border-collapse: collapse; /* Ensure borders are collapsed */
    border: 1px solid #E6E1DE !important;
}

/* border website */
.border-site {
    height: auto;
    border: 4px solid #121212;
    margin: 30px 20px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    flex-direction: row;
}

#humburger {
    margin-left: 20px;
}

.for-icon-vr {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.vr-link {
    text-decoration: none;
    color: black;
    cursor: pointer;
    transition: 0.5s;
    font-weight: 500;
}

.vr-link:hover {
    text-decoration: none;
    color: black;
    cursor: pointer;
    letter-spacing: 3px;
    font-weight: 600;
    transition: 0.5s;
}

#brand {
    width: 80px;
    height: auto;
    margin: 0 auto;
    margin-top: 21px;
}

/*for carousel*/
.carousel {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

.for-my-carousel {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

/*pictures in carousel*/
#piccarousel {
    width: 100%;
    height: auto;

}

/*division for pictures*/
.carousel-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}

/* 
.carousel-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 700px;
} */

/* first line info about project*/
.row1 {
    width: 100%;
    height: auto;
    opacity: 0;
    transform: translateX(-100%);
    animation: slideIn 1s forwards;
    font-family: Arial, Helvetica, sans-serif;
}

/*animaton for when you are scrolling and  that row slideIn with animation*/
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/*for topics*/
ul {
    list-style: none;

}

/* info where is the like architecture year ....*/
.info1 {
    font-size: 15pt;
    margin-right: 30px;
}

/* detail where is the like 2024 seyedeh nesa hosseini tehran iran ....*/
.detail1 {
    font-size: 14pt;
    margin-right: 30px;
}


/* second line info about project*/
.row1,
.row2 {
    width: 100%;
    height: auto;
    opacity: 0;
    transform: translateX(-100%);
    animation: slideIn 1s forwards;
    font-family: Arial, Helvetica, sans-serif;
}

/*animaton for when you are scrolling and  that row slideIn with animation*/
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/*for topics*/
ul {
    list-style: none;

}

/* info where is the like client team....*/
.info2 {
    font-size: 15pt;
    font-weight: 500;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-right: 30px;
}

/* info where is the like fandoq's team ....*/
.detail2 {
    font-size: 14pt;
    text-align: center;
    margin-right: 30px;
}

/* third line info about project*/
.row3 {
    width: 100%;
    height: 300px;
    margin-top: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    opacity: 0;
    transform: translateY(100%);
    animation: slideIn 4.5s forwards;
}

/*animaton for when you are scrolling and  that row slideIn with animation*/
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*caption... */
.info-about-project {
    width: 90%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* start responsive for devices smaller than 576px */
@media screen and (max-width: 576px) {

    /*carousel's pictures */
    .carousel {
        height: 250px;
    }
#humburger {
    margin-top:-47px !important;
    margin-left: 12px;
}
    #piccarousel {
        height: auto;
    }
td,th{
        font-family: 'Noto Sans Arabic', sans-serif;
}
    /* start forst line info*/
    .row1 {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
#brand {
    width: 80px;
    height: auto;
    margin: 0 auto;
    margin-top: -12px;
}
    .info1,
    .detail1 {
        flex-direction: column;
        gap: 10px;
        margin: 0;
        padding: 0;
        display: none;
    }

    .info1 li,
    .detail1 li {
        width: 100%;
        text-align: center;

    }

    .detail1 li {
        display: none;
    }

    .info1 li::after {
        content: attr(data-detail);
        display: block;
        margin-top: 5px;
        font-size: 14pt;
    }

    /* end forst line info*/
    /*start scond row*/
    .row1,
    .row2 {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .info1,
    .detail1,
    .info2,
    .detail2 {
        flex-direction: column;
        gap: 10px;
        margin: 0;
        padding: 0;
        display: none;
    }

    .row3 {
        margin-top: 20px;
        height: 440px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12pt;

    }

    .info2,
    .detail2 {
        flex-direction: column;
        gap: 10px;
        margin: 0;
        padding: 0;
    }

    .info2 {
        display: flex;
        font-size: 13pt;
        margin-right: 5px;
    }

    .detail2 {
        display: flex;
        gap: 20px;
        font-size: 13pt;
        margin-right: 5px;
    }

    .info2 li,
    .detail2 li {
        width: 100%;
        text-align: center;
    }

    /*start scond row*/
    /*start last line about caption*/
    .row3 {
        margin-top: 20px;
        height: 440px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12pt;

    }

    .info-about-project {
        margin-top: -30px;
    }

    /*end last line about caption*/
}

/* end responsive for devices smaller than 576px */
/* start responsive for devices greather than 577px and smaller than 768px */
@media screen and (min-width: 577px) and (max-width:768px) {

    .carousel {
        height: 250px;
    }

    #piccarousel {
        height: auto;
    }
td,th{
        font-family: 'Noto Sans Arabic', sans-serif;
}
    /* start forst line info*/

    .info1,
    .detail1 {
        flex-direction: column;
        gap: 10px;
        margin: 0;
        padding: 0;
        display: none;
    }
#brand {
    width: 80px;
    height: auto;
    margin: 0 auto;
    margin-top: -12px;
}
    .info1 li,
    .detail1 li {
        width: 100%;
        text-align: center;

    }

    .detail1 li {
        display: none;
    }

    .info1 li::after {
        content: attr(data-detail);
        display: block;
        margin-top: 5px;
        font-size: 14pt;
    }

    .row1,
    .row2 {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .info-about-project {
        margin-top: -30px;
    }


    /*end last line about caption*/
}

/* end responsive for devices greather than 577px and smaller than 768px */
/* start responsive for devices greather than 769px and smaller than 992px */
@media screen and (min-width: 769px) and (max-width:992px) {

    .enter-type,
    .enter-st,
    .enter-year,
    .enter-fn,
    .enter-lc {
        display: none;
    }

    .carousel {
        height: 550px;
    }

    #piccarousel {
        height: auto;
    }
#brand {
    width: 80px;
    height: auto;
    margin: 0 auto;
    margin-top: -18px;
}
    /*start last line about caption*/


    .row1,
    .row2,
    .row3 {
        font-size: 16pt;
    }
td,th{
        font-family: 'Noto Sans Arabic', sans-serif;
}
    .info-about-project {
        margin-top: -30px;
    }

    .row1,
    .row2 {
        font-size: 16pt;
    }

    .row3 {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12pt;
        margin-top: -30px;
    }

    .enter-type,
    .enter-st,
    .enter-year,
    .enter-fn,
    .enter-lc {
        display: none;
    }

    /*end last line about caption*/
}

/* end responsive for devices greather than 769px and smaller than 992px */
/* start responsive for devices greather than 993px and smaller than 1200px */
@media screen and (min-width: 993px) and (max-width:1200px) {

    .carousel {
        height: 450px;
    }

    #piccarousel {
        height: auto;
    }
#brand {
    width: 80px;
    height: auto;
    margin: 0 auto;
    margin-top: -12px;
}
    /*start last line about caption*/
    .row3 {
        height: 330px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12pt;
        margin-top: 30px;
    }
td,th{
        font-family: 'Noto Sans Arabic', sans-serif;
}
    .enter-type,
    .enter-st,
    .enter-year,
    .enter-fn,
    .enter-lc {
        display: none;
    }

    .row3 {
        font-size: 16pt;
        margin-top: 50px;
    }

    .row2 {
        margin-top: 200px;
    }

    .row1 {
        position: relative;
        top: 230px;
        height: auto;
    }

    .info-about-project {
        margin-top: -50px;
    }

    /*end last line about caption*/

}

/* end responsive for devices greather than 993px and smaller than 1200px */
/* start  responsive for devices greather than 1201px  */
@media screen and (min-width: 1201px) {



    /*start last line about caption*/
    .row3 {
        height: 230px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12pt;
        margin-top: -30px;
    }

    .enter-type,
    .enter-st,
    .enter-year,
    .enter-fn,
    .enter-lc {
        display: none;
    }

    .row2 {
        font-size: 16pt;
        margin-top: -30px;
    }
td,th{
        font-family: 'Noto Sans Arabic', sans-serif;
}
#brand {
    width: 80px;
    height: auto;
    margin: 0 auto;
    margin-top: -12px;
}

    .row1 {
        height: auto;
    }

    .info-about-project {
        margin-top: -20px;
    }
#humburger {
    margin-top:-12px;
    margin-left: 27px;
}
    /*end last line about caption*/

}

/* end  responsive for devices greather than 1201px  */