@import 'reset.css';
@import 'variables.css';
@import 'fonts.css';
@import 'component.css';
@import 'utilities.css';


/* Header start  */

.site-header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
}

.site-header .top-bar {
    padding-block: 20px;
    background-color: var(--color-background);
}

.site-header .top-bar .contact-wrapper a,
.site-header .top-bar .contact-wrapper span {
    color: #333333;
    font-family: var(--font-primary);
    transition: all 0.3s ease;
}

.site-header .top-bar .contact-wrapper a:hover {
    color: var(--color-accent);
}

.site-header .top-bar .contact-wrapper i {
    color: var(--color-accent);
}

.site-header .top-bar .address-wrapper i {
    color: #ff5e14;
}

.site-header .logo-wrapper {
    position: absolute;
    top: 0;
    left: 0;
}
.site-header .logo-wrapper a{display: block;}
.site-header .logo-wrapper img {
    height: 195px;
    width: 345px;
    object-fit: contain;
    object-position: center;
}

.site-header .bottom-bar-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(../../assets/images/backgrounds/construction-img.jpg);
    background-size: cover;
    background-position: 0px -60px;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    padding-block: 30px;
    padding-inline: 40px;
}

.site-header .bottom-bar-wrapper .nav-wrapper,
.site-header .bottom-bar-wrapper .cta-wrapper {
    position: relative;
    z-index: 10;
}

.site-header .bottom-bar-wrapper .nav-wrapper {
    padding-inline-start: 380px;
}

.site-header .bottom-bar-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: var(--color-background);
    opacity: 0.93;
}

.site-header .bottom-bar-wrapper .navigation-links {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    gap: 2em;
}

.site-header .bottom-bar-wrapper .navigation-links a {
    font-size: 20px;
    font-family: var(--font-primary);
    font-weight: 700;
    color: #333333;
    transition: all 300ms ease-in-out;
}

.site-header .nav_icon {
    display: none;
}
.site-header .mobile-menu{display:none ;}
.site-header .bottom-bar-wrapper .navigation-links a:hover,
.site-header .bottom-bar-wrapper .navigation-links li.active>a {
    color: var(--color-accent);
}

.site-header .navigation-links ul.sub-menu {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    background-color: var(--color-background);
    padding: 20px 30px;
    width: calc(100% - 380px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
}

.site-header .navigation-links li.has-submenu {
    display: flex;
    align-items: center;
    gap: 1em;
}

.site-header .navigation-links li.has-submenu::after {
    content: '';
    display: block;
    height: 10px;
    width: 10px;
    background-image: url("../../assets/images/icons/down-arrow.svg");
    background-size: contain;
    background-position: center;
    filter: brightness(0) saturate(100%) invert(40%) sepia(84%) saturate(1873%) hue-rotate(352deg) brightness(102%) contrast(101%);
    transition: all 300ms ease-in;
}

.site-header .navigation-links li.has-submenu:hover::after {
    transform: rotate(180deg);
}


/* Hero Section Start  */
.hero {
    height: calc(100vh - var(--header-height));
    margin-top: var(--hero-top-gap);
    min-height: 550px;
    position: relative;
}

.hero .bg-img {
    display: flex;
    justify-content: flex-end;
    height: 100%;
}

.hero .bg-img .img {
    width: 55%;
    position: relative;
}

.hero .bg-img .img::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("../../assets/images/patterns/hero-bg-pattern.png");
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;

}

.hero .bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    z-index: 10;
    padding-top: 200px;
    padding-bottom: 60px;
}

.hero-content .pre-title span::after {
    background-color: #b9dae9;
}

.hero-content .title span {
    color: var(--color-accent);
}

.hero-content .content-wrapper {
    padding-inline-end: 100px;
}

/* Hero Section End  */

/* CTA Section Start  */
.cta {
    padding-block: 15px;
    position: relative;
}

.cta .title h2 {
    font-weight: 700;
}

.cta .item-wrapper {
    padding-block: 40px;
    position: relative;
}

.cta .bg-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.cta .cta-bg {
    background-color: var(--color-tertiary);
    position: relative;
}

.cta .cta-bg::before {
    content: '';
    position: absolute;
    left: 30%;
    top: 0;
    width: 50px;
    height: 100%;
    background-color: var(--color-primary);
    border-right: 10px solid var(--color-secondary);
    border-left: 10px solid var(--color-secondary);
    transform: skew(-30deg) translateX(-50%);
}

.cta .cta-bg::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("../../assets/images/patterns/cta-pattern.png");
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.cta .text-part {
    padding-inline-start: 150px;
}

/* CTA Section End  */


/* Contact Section Start  */
.contact {
    padding-top: 60px;
    padding-bottom: 90px;
    background-color: #cbe8fa;
}

.contact .content-wrapper .title-black h2 {
    font-weight: 700;
}

.contact .content-wrapper .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.contact .core-values h4 {
    font-size: 22px;
    font-weight: 700;
    text-decoration: underline;
}

.contact .core-values ul {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.contact .core-values ul li {
    position: relative;
    padding-left: 20px;
}

.contact .core-values ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-image: url('../../assets/images/icons/arrow-orange.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.contact .form-wrapper {
    background-color: var(--color-primary);
    padding: 70px 60px;
    border-radius: 16px;
}

.contact .form-wrapper .title h2 {
    font-weight: 700;
}

.contact .form-wrapper .pre-title span {
    color: var(--color-text-secondary);
}

.contact .form-wrapper .pre-title span::after {
    background-color: #ffffff;
}

.contact .form-wrapper .input-wrapper {
    display: grid;
    gap: 0.5em;
}

.contact .form-wrapper button[type='submit'] {
    text-transform: uppercase;
}

.contact .wrapper-box {
    padding-inline-start: 100px;
}

/* Contact Section End  */

/* Portflolio Section Start  */
.portfolio {
    padding: 15px 0;
    background-color: #ffffff;
}

.portfolio .portfolio-slider-right {
    padding: 150px 69px 80px 0;
}

.portfolio .portfolio-inner {
    display: flex;
    position: relative;
}

.portfolio .portfolio-inner .portfolio-slider-left,
.portfolio .portfolio-inner .portfolio-slider-right {
    width: 50%;
}
.portfolio .swiper.portfolio-img-swiper {height: 100%;}
.portfolio-slider-left .swiper-slide .img {
    position: relative;
    padding-top: 80.95%;
    height:100%;
}

.portfolio-slider-left .swiper-slide .img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.portfolio .portfolio-slider-right {
    padding-inline-start: 120px;
    position: relative;
    align-content: center;

}

.portfolio-slider-right .pre-title span::after {
    background-color: #b9dae9;
}

.portfolio-slider-right .title span {
    color: var(--color-accent);
}

.portfolio .portfolio-slider-right::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(1px);
    background-image: url("../../assets/images/patterns/portfolio-pattern.png");
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
}

.portfolio-slider-right .swiper-btn-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2em;
}
.portfolio-slider-right .swiper-btn-wrapper > a.button {
    width: 200px;
}

/* Portflolio Section End  */

/* Footer Start  */
.site-footer {
    background-color: var(--color-primary);
    color: var(--color-text-secondary);
    padding-top: 90px;
    position: relative;
}

.site-footer .top-part .footer-wrapper {
    padding-bottom: 60px;
}

.site-footer .logo-wrapper img {
    height: 245px;
    width: 100%;
    object-fit: contain;
    object-position: center;
    max-width: 330px;
}

.site-footer .nav-wrapper>span {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.site-footer .navigation-links {
    margin-top: 10px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.site-footer .navigation-links>li {
    position: relative;
    padding-left: 20px;
}

.site-footer .navigation-links>li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--color-accent);
    border-radius: 50%;
}

.site-footer .navigation-links a {
    color: var(--color-text-secondary);
    font-weight: 700;
    transition: all 0.3s ease;
}

.site-footer .navigation-links a:hover {
    color: var(--color-accent);
}

.site-footer .footer-wrapper {
    display: grid;
    grid-template-columns: 2fr 2.5fr 2.5fr 1fr;
    gap: 2rem;
}

.site-footer .divider {
    width: 80%;
    height: 1px;
    background-color: #fff;
    opacity: 0.2;
    margin-inline: auto;
    margin-bottom: 10px;
}

.site-footer .bottom-part .copyright-wrapper {
    text-align: center;
    padding: 20px 0;
    font-size: 16px;
    color: var(--color-text-secondary);
    background-color: var(--color-tertiary);
}

.site-footer::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url("../../assets/images/patterns/footer-pattern.png");
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    max-width: 300px;
    pointer-events: none;
}
.portfolio .portfolio-slider-right .swiper-slide{
background-color: var(--color-primary)
}

/* Footer End  */