/* custom CSS */
:root {
    --primary-color: #131313;
    --secondary-color : #424242;
    --silver-color : #727272 ;
    --golden-color : #FF900E ;
    --white-color : #FFFFFF ;
    --extra-color-effect : rgba(250, 182, 182, 0.486);
}

/* Navigation List */
header {
    background-color: rgba(255, 144, 14, 0.1);
}
.nav-container {
    display: flex;
    justify-content: space-between;
    padding: 50px 230px;
}
.nav-list {
    display: flex;
    gap: 70px;
}
.nav-list-item {
    list-style: none;
    
}
.nav-list-item a {
    text-decoration: none;
    color: var(--secondary-color);
    transition: color .2s;
}
.nav-list-item a:hover {
    color: red;
}
/* banner */
.banner {
    margin-top: 100px;
    text-align: center;
    padding: 0 auto 50px auto ;
}
.banner-title {
    padding-bottom: 25px;
    font-size: 64px;
    font-weight: 700;
    line-height: 75px;
}
.banner-des {
    margin-bottom: 53px;
    font-size: 16px;
    padding: 0 360px;
}
/* universal btn */
.banner-btn {
    padding: 20px 25px;
    text-decoration: none;
    border: 1px solid ;
    border-radius: 8px;
    font-weight: 600;
    color: var(--white-color);
    background-color: var(--golden-color);
    font-size: 20px;
    transition: background-color .5s , color .5s;
}
.banner-btn:hover {
    padding: 20px 25px;
    text-decoration: none;
    border: 1px solid ;
    border-radius: 8px;
    font-weight: 600;
    color: var(--golden-color);
    background-color: var(--white-color);
    font-size: 20px;
}
/* ------ */

.banner-img {
    margin-top: 70px;
    display: flex;
    justify-content: center;
    padding: 0 240px 45px 240px;

}
.banner-img img {
    width: 100%;
}

/* Section - 1 */
.section1{
    display: flex;
    align-items: center;
    padding: 85px 300px 0 300px; 
    column-gap: 73px;
}
.sec1-img-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    width: 50%;
}

.sec1-img-col img {
    width: 100%;
    transition: box-shadow .5s;
    cursor: pointer;
}

.sec1-img-col img:hover {
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.sec1-info-col {
    width: 50%;
}
.sec1-title-silver {
    color: var(--silver-color);
}
.sec1-title {
    color: var(--primary-color);
}
.sec1-title-golden {
    color: var(--golden-color);
}
.sec1-des {
    color: var(--silver-color);
    padding-top: 24px;
    padding-bottom: 35px ;
}

/* section 2 */
.section2 {
    display: flex;
    align-items: center;
    padding: 130px 240px;
    gap: 54px;
}


.sec2-title {
    border-left: 1px solid var(--golden-color);
    padding-left: 21px;
}
.sec2-des {
    padding: 24px 0 30px 0;
}
.sec2-sub {
    padding: 30px ;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.sec2-des {
    color: var(--secondary-color);
}
.sec2-sub-title {
    padding-bottom: 10px;
}

.sec2-sub-des {
    color: var(--secondary-color);
}
.sec2-info-col {
    width: 50%;
}

.sec2-img-col{
    width: 50%;
    height: 1059px;
    display: flex;
    align-items: flex-end;
    background-image: url(../images/architect.png);
    background-repeat: no-repeat;
    background-position: top;
}
.sec2-btn-special {
    font-size: 65px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 32px;
    line-height: 40px;
    padding: 45px 42px;
    text-decoration: none;
    color: var(--white-color);
    background-color: var(--golden-color);
    border-radius: 10px;
    border: 1px solid var(--golden-color);
    transition: background-color .5s , color .5s;
}

.sec2-btn-special:hover {
    color: #FF900E;
    background-color: white;
    border: 1px solid var(--golden-color);
}
.experience {
    font-size: 25px;
    font-weight: 500;
}

/* section 3 */

.section3 {
    /* padding: 0 240px; */
}
.sec3-title {
    color: var(--primary-color);
    padding-bottom: 24px;
    font-weight: 700;
    font-size: 45px;
    padding-left: 240px;
}
.sec3-des {
    width: 816px;
    font-weight: 400;
    font-size: 16px;
    color: var(--silver-color);
    padding-bottom: 100px;
    padding-left: 240px;
}
.sec3-cards {
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
    column-gap: 25px ;
    padding: 0 250px;
    justify-content: center; 
}
.sec3-single-card {
    text-align: center;
    padding: 60px;
    border: 1px solid var(--golden-color);
    border-radius: 10px;
    transition: box-shadow .5s , border .5s , background-color .5s;
}
.sec3-single-card:hover {
    cursor: pointer;
    box-shadow: 4px 7px 11px 3px var(--golden-color);
    border: 1px solid var(--extra-color-effect);
    background-color: var(--extra-color-effect)
}


.sec3-card-number {
    font-weight: 600;
    font-size: 45px;
    color: var(--secondary-color)
}
.sec3-card-info {
    padding: 10px 0 5px 0;
    font-weight: 600;
    font-size: 20px;
    color: var(--silver-color);
}

footer {
    margin-top: 180px;
    margin-bottom: 216px;
    text-align: center;
}
.footer-title {
color: var(--primary-color);
}
.footer-des {
color: var(--secondary-color);
padding-top: 24px;
padding-bottom: 50px;
}
.footer-icons {
    display: flex;
    gap: 80px;
    padding: 0 240px;
    justify-content: space-evenly;
}

.footer-icons img{
    cursor: pointer;
    transition: transform .5s;
}

.footer-icons img:hover{
    cursor: pointer;
    transform: scale(1.5);
}

.copyright {
    margin-top: 130px;
    padding: 0 240px;
    
}
.footer-copy {
    padding: 40px 0;
    background-color: #FFF4E7;
    font-weight: 400;
    font-size: 20px;
}