*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    list-style: none;
    outline: none;
    word-break: break-word;
    text-align: justify;
    scroll-behavior: smooth;
}

:root {
    --primary-color: #407c87;
    --secondary-color: #a5dbdd;
    --tertiary-color: #eef1f6;
    --quaternary-color: #d3e1e2;
    --mainMenu-link-color: #4e4e4ef6;
    --mainMenu-bg-color: #ffffffbe;
    --mainMenu-bg-color-2: #73a8af9f;
    --mainMenu-bg-color-light-purple: #af73aa9f;
    --gap-3: 3px;
    --gap-5: 5px;
    --gap-10: 10px;
    --gap-15: 15px;
    --gap-20: 20px;
    --gap-25: 25px;
    --gap-30: 30px;
    --gap-main: 15px; /* this value is changing for devices*/
    --left-right-header-grid: 20px;
    --top-bottom-header-grid: 10px;
    --left-right-main-grid: 20px;
    --left-right-main-container: 20px;
    --container-bg-color: #ffffff7a;
    --container-border-color: #c7c3ff93;
    --container-border-color-hover-click: #8d87ff;
    --container-border-radius: 5px;
    --padding-3: 3px;
    --padding-5: 5px;
    --padding-10: 10px;
    --padding-15: 15px;
    --padding-20: 20px;
    --padding-25: 25px;
    --padding-30: 30px;
    --padding-35: 35px;
    --font-family-default: "poppins", sans-serif, Arial, Helvetica;
    --font-weight-100: 100;
    --font-weight-200: 200;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --project-link-color: #164877ee;
    --project-locate-link-td: none;
    --language-items-color: #163877;
    --font-size-big: 1rem;
    --font-size-big-1: 1.1rem;
    --font-size-big-2: 1.2rem;
    --font-size-big-3: 1.3rem;
    --font-size-big-4: 1.4rem;
    --font-size-big-5: 1.5rem;
    --font-size-big-x: 2rem;
    --font-size-big-x1: 3rem;
    --font-size-big-x2: 4rem;
    --font-size-big-x4: 5rem;
    --font-size-big-x5: 6rem;
    --font-size-small-1: .95rem;
    --font-size-small-1a: .90rem;
    --font-size-small-2: .85rem;
    --font-size-small-2a: .80rem;
    --font-size-small-3: .75rem;
    --font-size-small-3a: .70rem;
    --footer-link-color: #474747f3;
    --footer-bg-color: #dcdddc;
}

body {
    background: #d1d1d16e;
}
body.darkMode{
    background: #5a5757;
}
main {
    display: grid;
    grid-template-columns: var(--left-right-main-grid) 20px 20px 5fr 20px 20px var(--left-right-main-grid);
    /* 
    grid-template-columns: var(--left-right-main-grid) 40px 5fr 40px var(--left-right-main-grid);*/
    /*grid-template-rows: min-content min-content;
    gap: var(--gap-20) 0;*/
    gap: var(--gap-main) 0;
    align-content: start;
    justify-content: start;
}

header {
    grid-column: 1 / -1;
    width:100%;
    display: grid;
    /*grid-template-columns: var(--left-right-header-grid) 40px 3fr 3fr 40px var(--left-right-header-grid);*/
    grid-template-columns: var(--left-right-header-grid) 40px repeat(4, 1fr) 40px repeat(5, 1fr) 40px var(--left-right-header-grid);
    /*grid-template-columns: var(--left-right-header-grid) 40px  3fr 3fr 40px var(--left-right-header-grid);*/
    grid-template-rows: var(--top-bottom-header-grid) 40px var(--top-bottom-header-grid) min-content;
    align-content: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    z-index: 1000;
}

header .logoContainer {
    grid-column: 2;
    grid-row: 2;
    height: 40px;
    width: 40px;
    display: flex;
}

.logoContainer a {
    height: 40px;
    width: 40px;
    display: flex;
}

.modeButton{
    grid-column: 6 / 9;
    grid-row: 2 ;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
}
/*.modeIcon{
    border: 1px solid #858585;
    border-radius: 10%;
    fill: #858585;
}
*/
.switch{
    height: 20px;
    width: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 3px;
    border:0px solid #067056;
    border-radius: 30px;
    background: #101f7480;
    box-shadow: 0 0 5px 1px #cecdcd
}
.switch input{
    height:0;
    width:0;
    display: none;
    transition: all .3s;
}
.switch .slide{
    height: 14px;
    width:14px;
    border: none;
    outline: none;
    border-radius: 100%;
    background: #ffffff;
    cursor: pointer;
}
.switch input:checked{
    height: 14px;
    width:14px;
    display: block;
    opacity: 0;
}
header .hamburgerQuite {
    grid-column: -3;
    grid-row: 2;
    height: 32px;
    width: 34px;
    display: flex;
    flex-direction: column;
    /*justify-content: center; 
    align-items: center;*/
    overflow: hidden;
    gap: 30%;
    animation: hamburger 600ms 1 ease-in-out;
    border: 1px solid #858585;
    border-radius: 10%;
    padding: 6px;
    justify-content: center;
    align-self: center;
    justify-self: end;

}

@keyframes hamburger {
    0% {
        justify-content: end;
        gap: 0;

    }

    /*50%{
        justify-content: end;
        margin-top: -40px;
    } */
    100% {
        gap: auto;
    }
}

header .hamburgerQuite .lines {
    height: 2.5px;
    width: 100%;
    background: #858585;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    /*animation: allLinesa 2s  ease-in-out ;*/
}

/* when click on hamburger menu */
header .hamburgerOpen {
    grid-column: -3;
    grid-row: 2;
    height: 32px;
    width: 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    gap: 30%;
    animation: hamburger 600ms 1 ease-in-out;
    border: 1px solid #858585;
    border-radius: 10%;
    padding: 6px;
    align-self: center;
    justify-self: end;
    /*animation: menuOpen 1600ms 1 ease-in-out;*/
    position: relative;

}

@keyframes menuOpen {
    0% {
        margin-top: -100px;
    }
}

header .hamburgerOpen .lines {
    height: 2px;
    width: 100%;
    background: #858585;
    animation: linesRotate 600ms ease-in-out;
    border-radius: 2px;
}

header .hamburgerOpen .line1 {
    top: 3px;
    position: relative;
    transform: rotateZ(43deg)
}

header .hamburgerOpen .line3 {
    top: -4px;
    position: relative;
    transform: rotateZ(-45deg);
}

header .hamburgerOpen .line2 {
    position: absolute;
    left: -100%;
}

@keyframes linesRotate {
    0% {
        transform: rotateZ(180deg);
    }
}

/* Menu and Navigation*/
/* header nav{
    grid-column: 2 / -2;
    display: auto;
} */

header .mainMenu {
    width: 100%;
    height: min-content;
    grid-column: 1 / -1;
    grid-row: 3 / -1;
    display: grid;
    grid-template-columns: var(--left-right-main-container) 3fr 3fr var(--left-right-main-container);
    grid-template-rows: min-content;
    flex-direction: column;
    position: absolute;
    z-index: 1001;
    transition: margin-left 600ms ease-in-out;
    margin-left: -100vw;
    
}
/*@media (max-width: 1023px) {
        .mainMenu{
            / *background:#ffffff;* /
            border: 1px solid #000;
        }
    } */
.mainMenu .menuList {
    grid-column: 1 / -1;
    height: auto;
    width: 100%;
    flex-wrap: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: var(--gap-10);
    padding: calc(2 * (var(--padding-30))) 0;
    /*padding: var(--padding-20);
    margin-left: 100%;
    transform: translateX(-70%);*/
}

.menuList .menuItems {
    width: auto;
    height: auto;
    padding-left: 35%;
}

.menuItems .menuLink {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-5);
    font: var(--font-weight-400) var(--font-size-big) var(--font-family-default);
    text-decoration: none;
    color: var(--mainMenu-link-color)
}

/* Menu and Navigation end here*/
.home,
.projects,
.explore,
.contact {
    grid-column: 2 / -2;
    display: grid;
    /*grid-template-columns: var(--left-right-main-container) 4fr var(--left-right-main-container);
    grid-template-columns: var(--left-right-main-container) 1fr  var(--left-right-main-container) 1fr  1fr var(--left-right-main-container); 
    grid-template-columns: var(--left-right-main-container)  repeat(3,1fr) var(--left-right-main-container) var(--left-right-main-container) repeat(3,1fr)  var(--left-right-main-container); */
    grid-template-columns: repeat(12, 1fr);
    background: #a5dbdd00;
    /*gap: var(--gap-20);*/
    gap: var(--gap-15);
}

.home {
    grid-column: 1 / -1;
    grid-template-rows: 1fr repeat(3, min-content).5fr .5fr;
    height: 100vh;
    /*margin-top: -85px; */
    place-items:end  center;
    background-image: url(../images/backgrounds/img1.jpg);
    /*background-image:linear-gradient(to bottom , #ffffff 80px , #ffffff44 , #ffffff38) , url(../images/backgrounds/img1.jpg);*/
    background-position: center 0;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    /*height: calc(100vh - 85px);
    min-height: calc(25vh - 50px );
    padding: 0  var(--padding-15);*/
    overflow: hidden;
    z-index: 999;
}
.home::before{
    height: 100%;
    width: 100%;
    content: "";
    position: absolute;
    top:0;
    left:0;
    background:linear-gradient(to bottom , #ffffff90 80px , #ffffff90, #ffffff90, #ffffff90, #ffffff90, #ffffff90);
    background-position: center 0;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(7px);
    z-index: -1;
}

.home
.introDesc,
.siteSlogan,
.siteName,
.down {
    grid-column: 2 / -2;
    text-align: center;
    /* grid-column: 1 / -1; */
}

.introDesc {
    font: var(--font-weight-600) var(--font-size-big-x) var(--font-family-default);
    animation: onloadAnimation  1.5s ease-in-out 0s;
    text-transform: capitalize;
    color:rgb(112, 111, 111);
}
@keyframes onloadAnimation {
    0%{
        position: relative;
        transform: translateY(-40px);
    }
}
 .siteName {
    text-decoration: none;
    font: var(--font-weight-600) var(--font-size-big-x2) var(--font-family-default);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 100%;
    color:var(--primary-color);
    /*animation: siteNamqe 2s ease-in-out;*/
    animation: onloadAnimation  1s ease-in-out 0s, textBackground 10s infinite; 
    /*text-shadow: 0px  0px 3px #165a926e;*/
}
@keyframes textBackground {
    50%{
        transition: background 1s linear ; 
        background-image: url(../images/backgrounds/img2.jpg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
        background-position: -10% 0 ;
        background-size: 300%;
        filter: drop-shadow(0 0px 3px #000);
    }
}
/*@keyframes siteName {
    50% {
        rotate: 180deg;
    }
}*/

.siteSlogan {
    font: var(--font-weight-400) var(--font-size-big-2) var(--font-family-default);
    animation: onloadAnimation  .5s ease-in-out 0s;

}
.home .downIcon{
    grid-column: 6 / 8;
    grid-row: -3;
    height: 40px ;
    width: 100px;
    display: flex;
    place-self: center;
    justify-content: center;
    align-items: center;  
    /*border-radius: 20px;  
    margin: auto;
    position: absolute;
    bottom:80px;*/
    padding: var(--padding-5) var(--padding-5)  var(--padding-3) var(--padding-5);
    animation: downIconborder 1.5s infinite;
    background: linear-gradient(to right , #000 ,#000);
    background-size: 2px 2px;
    background-repeat: no-repeat;
    background-position: center bottom;

}
@keyframes downIconborder {
    50%{
        /*border-bottom:1px solid  #000;*/
    background-size: 80% 2px;
    }
}
.downIcon a{
    width:auto;
    display: flex;
    align-items: end;
    padding:0;
    color:var(--mainMenu-link-color);
    animation: downButton 1.5s infinite ;
    transform: translateY(10px);
}
/* .downIcon svg {
    
} */
@keyframes downButton {
    50%{
        transform: translateY(-20px);
    }
    /*0%{
        transform: translateY(10px);
    }
    50%{
        bottom: 100px;
    }*/
}
.projects {
    place-items: center;
    /* gap: var(--gap-15); */
}

.projects .slideContainer {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: var(--left-right-header-grid) 40px 5fr 40px var(--left-right-header-grid);
    /*grid-template-rows: 100px repeat(8 ,min-content);*/
    background: var(--container-bg-color);
    border: 1px solid var(--container-border-color);
    padding: var(--padding-15);
    border-radius: var(--container-border-radius);
    gap: var(--gap-15);
    transition: border .4s;
    overflow: hidden;
}

.projects .slideContainer:hover {
    border: 1px solid var(--container-border-color-hover-click);
}

.projects .project {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap-15);
}

/* .projects .project1{
    display: grid;
    grid-column: 2 / -2;
} */
.projects .project img {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 14/9;
    object-fit: cover;
}

.projectHeader {
    grid-column: 1 / -1;
    justify-content: start;
    font: var(--font-weight-600) var(--font-size-big-2) var(--font-family-default);
    line-height: 1.13;
    text-transform: capitalize;
}

.projectDescription {
    line-height: 1.2 !important;
    grid-column: 1 / -1;
    justify-content: start;
    font: var(--font-weight-400) var(--font-size-small-1) var(--font-family-default);
}

.projectLink {
    line-height: 1.2 !important;
    grid-column: 1 / -1;
    justify-content: start;
    align-items: center;
    gap: var(--gap-3);
    text-decoration: none;
    color: var(--project-link-color);
    font: var(--font-weight-500) var(--font-size-big) var(--font-family-default);
    text-transform: capitalize;
}

.locations {
    line-height: 1.2 !important;
    grid-column: 1 / -1;
    justify-content: start;
    align-items: center;
    gap: var(--gap-3);
    text-decoration: none;
    font: var(--font-weight-400) var(--font-size-big) var(--font-family-default);
    text-transform: capitalize;
}

.projectMore {
    line-height: 1.2 !important;
    grid-column: 1 / -1;
    justify-content: start;
    gap: var(--gap-3);
    font: var(--font-weight-400) var(--font-size-big) var(--font-family-default);
}

.projectMore::first-letter {
    text-transform: capitalize;
}

.projects .PlayPause {
    grid-column: 1 / -1;
    display: none;
    /*this is for temporary */
}

.projects .clickNext {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.projects .clickNext .span_items {
    height: 10px;
    width: 10px;
    margin: 3px;
    border-radius: 10px;
    background: #6278f5;
    transition: height .5s ease-in-out, width .5s ease-in-out;
}

.projects .clickNext .span_items:hover {
    cursor: pointer;
}

/*.explore{
    gap: var(--gap-15) 0;
} */
.explore .typeConcrete {
    grid-column: 1 / -1;
    font: var(--font-weight-600) var(--font-size-big-2) var(--font-family-default);
    background: var(--default-bg-color);
    padding: 0 var(--padding-15);
}

/* old and flex layout
.explore .concrete {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-10);
    background: var(--container-bg-color);
    border: 1px solid var(--container-border-color);
    padding: var(--padding-15);
    border-radius: var(--container-border-radius);
    transition: border .4s;
    / * position relative for onclick event for IMG * /
    position: relative;
} */
.explore .concrete {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: var(--gap-10);
    background: var(--container-bg-color);
    border: 1px solid var(--container-border-color);
    padding: var(--padding-15);
    border-radius: var(--container-border-radius);
    transition: border .4s;
    /* position relative for onclick event for IMG */
    position: relative;
}

.explore .concrete:hover {
    border: 1px solid var(--container-border-color-hover-click);
}

.concrete .concreteDesc {
    grid-column: 1 / -1;
    width: 100%;
    font: var(--font-weight-600) var(--font-size-big-2) var(--font-family-default);
    line-height: 1.2;
}

/* old for layout flex
.concrete img {
    width: calc(50% - (var(--gap-10) / 2));
} */
.concrete img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 13 / 9;
}
.concrete img:nth-child(1) {
    object-position: 0 -18px;
    grid-column: 1 / -1;
}

.concrete img:nth-child(2){
    grid-column: 1 / -5;
}

.concrete img:nth-child(3){
    grid-column: -5 / -3;
}
.concrete img:nth-child(4){
    grid-column: -3 / -1;
}
/*.concrete img:is(:nth-child(2), :nth-child(3), :nth-child(4)){
    border: 3px solid red;
} */
.concrete .concreteInfo {
    grid-column: 1 / -1;
    font: var(--font-weight-400) var(--font-size-small-1) var(--font-family-default);
}

.contact{
    gap: 0  var(--gap-10);
    background: var(--container-bg-color);
    border: 1px solid var(--container-border-color);
    padding: var(--padding-15);
    border-radius: var(--container-border-radius);
    transition: border .4s;
    position: relative;
    overflow: hidden;
}
.contact img {
    grid-column: 1 / -1;
    width:100%;
}
.contact .ownerInfo{
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--padding-10);
    background: var(--container-bg-color);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: absolute;
    bottom: var(--padding-15);
    gap: var(--gap-10)   
}
.ownerInfo h3{
    text-align: center;
    font: var(--font-weight-600) var(--font-size-big-3) var(--font-family-default);
}
.ownerInfo  .ownerSocialMedia{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.ownerSocialMedia  .ownerSocialMediaItems{
    display: flex;
    align-items: center;
    gap:var(--gap-5);
    position: relative;
    overflow: hidden;
    color: #3a3939;
    fill: #3a3939 ;
    border: 1px solid red;
}
.ownerSocialMediaItems svg{
    cursor:pointer;
}
.ownerSocialMediaItems  a{
    display: none;
    justify-content: center;
    align-items: center;
    place-self: center;
    gap: var(--gap-5);
    text-decoration: none;
    font: var(--font-weight-500) var(--font-size-small-1a) var(--font-family-default);
    color: #3a3939;
    white-space: nowrap;
    /*box-shadow: 0 0 2px 1px rgba(7, 98, 110, 0.301);*/
    filter: drop-shadow(0 0 5px #83cac1);
}
/*.ownerSocialMediaItems  span{
    display: none;
}
.ownerInfo:hover .ownerSocialMedia{
    justify-content: start;
} * /
.ownerSocialMedia:hover > :not(:hover){
    opacity: 0;
    display: none;
}
.ownerSocialMediaItems  a{
    display: flex;
    justify-content: start;
    align-items: center;
    place-self: center;
    gap: var(--gap-5);
    text-decoration: none;
    position: relative;
    font: var(--font-weight-500) var(--font-size-small-1a) var(--font-family-default);
    position: relative;
    overflow: hidden;
    color: #3a3939;
    white-space: nowrap;
    / *box-shadow: 0 0 2px 1px rgba(7, 98, 110, 0.301);* /
    filter: drop-shadow(0 0 5px #83cac1);
}
.ownerSocialMediaItems  a span{
    position: absolute;
    left: -200px;
    top:0
    / *opacity: 0; * /
}
.ownerSocialMediaItems  a:hover span{
    / *opacity: 1;* /
    position: relative;
    left: 0;
    top:0
}
/*
.ownerSocialMedia:hover .ownerSocialMediaItems{
    width: 0;
    height: 0;
    / * display: flex;
    align-items: center;
    justify-content: end;* /
    overflow: hidden;
}
.ownerSocialMedia  .ownerSocialMediaItems:hover{
    height: auto;
    width: fit-content;
}
.ownerSocialMediaItems  a{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: var(--gap-5);
    text-decoration: none;
    position: relative;
    font: var(--font-weight-500) var(--font-size-small-1a) var(--font-family-default);
    position: relative;
    overflow: hidden;
}
.ownerSocialMediaItems span{
    position: absolute;
    white-space: nowrap;
    left: -200px
}
.ownerSocialMediaItems a:hover span{
    position: relative;
    left: 0;
} */
/*.ownerSocialMedia span {
    position: absolute;
    left: -150px
}.ownerSocialMedia a:hover  span {
    position: relative;
    left: auto;
}
.ownerSocialMediaItems:hover a svg , span{ 
    display: block;
} */
/* .ownerSocialMedia:hover a {
    display: none;
} 
.ownerSocialMedia:hover .ownerSocialMediaItems a{
    display: none;
}
.ownerSocialMedia .ownerSocialMediaItems:hover a , span{
    display: flex;
    justify-content: start;
    align-items: end;
}
.ownerSocialMedia span{
    left:-200px;
    position: absolute;
}
.ownerSocialMedia .ownerSocialMediaItems:hover  span{
    left: 0;
    position: relative;
} 
*/
/*footer{
    grid-template-columns: var(--left-right-header-grid) 40px  5fr 40px var(--left-right-header-grid);* /
    grid-template-columns: var(--left-right-header-grid) 40px  3fr 3fr 40px var(--left-right-header-grid);
    gap: var(--gap-15) 0;
    / *padding: var(--padding-15);
}*/
footer {
    background: var(--footer-bg-color);
    display: grid;
    /* grid-template-columns: repeat(12, 1fr); */
    grid-template-columns: var(--left-right-header-grid) 40px repeat(10, 1fr) 40px var(--left-right-header-grid);
    grid-column: 1 / -1;
    padding: 0 0 var(--padding-20) 0;
    gap: var(--gap-15) 0;
}

footer .quickLinksArea,
.socialMediaLinks,
.newsletter {
    grid-column: 2 / -2;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-15) / 2) 0;
}

.quickLinksArea .quicklinksTitle {
    height: auto;
    width: 100%;
    display: inherit;
    gap: var(--gap-3);
    align-items: center;
    font: var(--font-weight-600) var(--font-size-big-2) var(--font-family-default);
    color: var(--mainMenu-link-color);
}

.quickLinksArea .quickList {
    height: auto;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
}

.quickLinksArea .quickItems {
    display: inherit;
}

.quickLinksArea .quickLinks {
    display: inherit;
    justify-content: center;
    align-items: center;
    gap: 0 calc(var(--gap-15) / 3);
    text-decoration: none;
    font: var(--font-weight-400) var(--font-size-big) var(--font-family-default);
    color: var(--footer-link-color);
    /* line-height: 1; */
}

/*.quickLinks>.gabarGroup,
.rojCom {
    transition: color 300ms ease-in-out;
} */

.quickLinksArea .quickLinks:hover .gabarGroup {
    fill: #008080;
    color: #008080;
}

.quickLinksArea .quickLinks:hover .rojCom {
    fill: #2372a0;
    color: #2372a0;
}

/*social Media Links*/

.socialMediaLinks .socialMediaLinksTitle {
    height: auto;
    width: 100%;
    display: flex;
    gap: var(--gap-3);
    align-items: center;
    font: var(--font-weight-600) var(--font-size-big-1) var(--font-family-default);
    color: var(--mainMenu-link-color);
}

.socialMediaLinks .socialList {
    height: auto;
    width: auto;
    display: inherit;
    flex-direction: column;
    gap: var(--gap-5);
}

.socialMediaLinks .socialItems {
    display: inherit;
}

.socialMediaLinks .socialLink {
    display: inherit;
    justify-content: start;
    align-items: center;
    gap: 0 calc(var(--gap-15) / 3);
    text-decoration: none;
    font: var(--font-weight-400) var(--font-size-big) var(--font-family-default);
    color: var(--footer-link-color);
    /*line-height: 1; */
}

/* newsletter*/
.newsletter .newsletterForm {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-5);
}

.newsletter .newsletterTitle {
    width: 100%;
    color: var(--footer-link-color);
    font: var(--font-weight-600) var(--font-size-big-1) var(--font-family-default);
}

.newsletter .inpt {
    height: auto;
    width: 100%;
    padding: var(--padding-5);
    outline: none;
    border: 1px solid #adadad;
    border-radius: 0;
    font: var(--font-weight-300) var(--font-size-big) var(--font-family-default);
    transition: border .4s;
}

.newsletter .inpt:focus,
.newsletter .inpt:hover {
    border: 1px solid var(--container-border-color-hover-click);
}

.newsletter input[type="text"] {
    text-transform: capitalize;
}

.newsletter .inpt[type="email"] {
    text-transform: lowercase;
}

.newsletter .newsletterSubmitButton {
    padding: var(--padding-5);
    border: none;
    border-radius: none;
    background: #1d7229;
    color: #1f1d1d;
    font: var(--font-weight-600) var(--font-size-big-1) var(--font-family-default);
}

footer .copyRight_container {
    grid-column: 2 / -2;
}

.copyRight_container .copyrightDesc {
    text-align: left !important;
    font: var(--font-weight-400) var(--font-size-small-1a) var(--font-family-default);
}

.languageContainer {
    grid-column: 1 / -1;
    min-height: 35vh;
    height: auto;
    max-height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffffbb;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: fixed;
    bottom: -100vh;
    transition: bottom .3s;
}

.langList {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--gap-5);
}

.langItems {
    width: auto;
    height: auto;
    padding: var(--padding-5);
    background: linear-gradient(to right, var(--mainMenu-link-color), var(--mainMenu-link-color));
    background-repeat: no-repeat;
    background-size: 0 2px;
    background-position: bottom center;
    transition: background-size .3s;
}

.langList .langItems:hover {
    background-size: 100% 2px;
}

.langItems .langName {
    font: var(--font-weight-400) var(--font-size-big-2) var(--font-family-default);
    text-decoration: none;
    color: var(--language-items-color)
}

.pageLoading{
    height: 100vh;
    width: 100vw;
    display: flex;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff94;
    -webkit-backdrop-filter: blur(10px) /* brightness(40%) */;
            backdrop-filter: blur(10px) /* brightness(40%) */;
    position: fixed;
    justify-content: center;
    align-items: center;
    z-index: 5000;
}
/*when page loading */
.pageLoading .loading{
    height: 20px;
    width:  20px;
    background: #0b5257;
    border-radius: 10px;
    animation:  loading 3s infinite;
}
@keyframes loading {
    0%{
        width: 20px;
        height: 20px;
        
    }
    25%{
        width: 100px;
        height: 20px;
        
    }
    50%{
        width: 20px;
        height: 20px;
        
    }
    75%{
        width: 20px;
        height: 100px;
        

    }
    100%{
        width: 20px;
        height: 20px;
    }
}
























/*img:not(a > img){
    width: 100%;
} */
@media (min-width: 414px) {
    body {
        /*background: purple; */
    }

    :root {
        --left-right-header-grid: 30px;
        /*--top-bottom-header-grid: 20px; old */
        --top-bottom-header-grid: 15px;
        --left-right-main-grid: 30px;
    }
}

@media (min-width: 480px) {
    body {
        /*background: #ff0000bb; */
    }

    :root {
        --left-right-header-grid: 30px;
        /*--top-bottom-header-grid: 30px; */
        --left-right-main-grid: 40px;
    }

}

/*@media (min-width: 576px) {} */

@media (min-width: 768px) {
    body {
        /*background: #fbff06bb; */
    }
    :root {
        --left-right-header-grid: 50px;
        --left-right-main-grid: 60px;
        --gap-main: 60px; /* this value is changing for devices*/
    }

    header .mainMenu{
        grid-column: 2 /-2;
    }
    .mainMenu .menuList {
        height: auto;
        width: 100%;
        flex-wrap: nowrap;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: start;
        gap: var(--gap-10);
        padding: var(--padding-30) 0;
        /*padding: var(--padding-20);
        margin-left: 100%;
        transform: translateX(-70%);*/
    }
    .menuList .menuItems {
        width: auto;
        height: auto;
        padding-left: 0;
    }
    .projects .project {
        grid-template-rows: repeat(4, min-content) 1fr;
        row-gap: 0;
    }

    .projects .project img {
        grid-column: 1 / 7;
        grid-row: 1 / -1;
        width: 100%;
        aspect-ratio: 14/9;
        object-fit: cover;
    }

    .projectHeader {
        grid-column: 7 / -1;
        grid-row: 1 / 1;
        justify-content: start;
        font: var(--font-weight-600) var(--font-size-big-2) var(--font-family-default);
        line-height: 1;
        text-transform: capitalize;
    }

    .projectDescription {
        grid-column: 7 / -1;
        grid-row: 2 / 2;
        justify-content: start;
        font: var(--font-weight-400) var(--font-size-small-1) var(--font-family-default);
    }

    .projectLink {
        grid-column: 7 / -1;
        grid-row: 3 / 3;
        justify-content: start;
        align-items: center;
        gap: var(--gap-3);
        text-decoration: none;
        color: var(--project-link-color);
        font: var(--font-weight-500) var(--font-size-big) var(--font-family-default);
        text-transform: capitalize;
    }

    .locations {
        grid-column: 9 / -1;
        grid-row: 3 / 3;
        justify-content: start;
        align-items: center;
        gap: var(--gap-3);
        text-decoration: none;
        font: var(--font-weight-400) var(--font-size-big) var(--font-family-default);
        text-transform: capitalize;
    }

    .projectMore {
        grid-column: 7 / -1;
        grid-row: 4 / 4;
        justify-content: start;
        gap: var(--gap-3);
        font: var(--font-weight-400) var(--font-size-big) var(--font-family-default);
    }

    .explore .concrete:nth-child(even) {
        grid-column: 1 / 7;
    }

    .explore .concrete:nth-child(odd) {
        grid-column: 7 / -1;
    }
    /*Contact and owner area*/
    .contact{
        gap: 0  var(--gap-15);
    }
    .contact img {
        grid-column: 1 / 6;
        grid-row: 1;
        width:100%;
    }
    .contact .ownerInfo{
        grid-column: 6 / -1;
        grid-row: 1 / -1;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: start;
        place-self: start;
        justify-self: start;
        padding: var(--padding-10);
        background: var(--container-bg-color);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        position: static;
        gap: var(--gap-10);
        border:0px solid red
    }
    .ownerInfo h3{
        text-align: left;
        font: var(--font-weight-600) var(--font-size-big-3) var(--font-family-default);
    }
    .ownerInfo  .ownerSocialMedia{
        display: flex;
        flex-direction: column;
        gap:15px;
        justify-content: space-between;
        align-items: stretch;
    }
    .ownerSocialMedia  .ownerSocialMediaItems{
        display: flex;
        align-items: center;
        gap:var(--gap-10);
        position: relative;
        overflow: hidden;
        color: #3a3939;
        fill: #3a3939 ;
        border: 0px solid red;
    }
    .ownerSocialMediaItems svg{
        height:26px;
        cursor:pointer;
    }
    .ownerSocialMediaItems  a{
        display: block;
        justify-content: center;
        align-items: center;
        place-self: center;
        gap: var(--gap-5);
        text-decoration: none;
        font: var(--font-weight-500) var(--font-size-small-1a) var(--font-family-default);
        color: #3a3939;
        white-space: nowrap;
        /*box-shadow: 0 0 2px 1px rgba(7, 98, 110, 0.301);*/
        filter: drop-shadow(0 0 5px #83cac1);
    }
    /* contact end here */
    footer {
        grid-template-columns: repeat(24, 1fr);
        gap: var(--gap-15);
        padding: var(--padding-35) 0 ;
    }
    /* footer */
    footer .quickLinksArea {
        grid-column: 7 / 13;
    }

    footer .socialMediaLinks {
        grid-column: 2 / 7;
        grid-row: 1;
    }

    footer .newsletter {
        grid-column: 13 / -2;
    }
}

@media (min-width: 992px) {
    body {
        /*background: #9b2fa5bb; */
    }

    :root {
        --left-right-header-grid: 50px;
        --left-right-main-grid: 60px;
    }

    .projects .slideContainer {
        gap: var(--gap-20);
    }

    .projects .project {
        grid-template-rows: 20px min-content 20px 20px 1fr;
        gap: var(--gap-20);
    }

    .projects .project img {
        grid-column: 1 / 7;
        grid-row: 1 / -1;
        width: 100%;
        aspect-ratio: 14/9;
        object-fit: cover;
    }

    .projectHeader {
        grid-column: 7 / -1;
        grid-row: 1 / 1;
        justify-content: start;
        font: var(--font-weight-600) var(--font-size-big-2) var(--font-family-default);
        line-height: 1;
        text-transform: capitalize;
    }

    .projectDescription {
        grid-column: 7 / -1;
        grid-row: 2 / 2;
        justify-content: start;
        font: var(--font-weight-400) var(--font-size-small-1) var(--font-family-default);
    }

    .projectLink {
        grid-column: 7 / -1;
        grid-row: 3 / 3;
        justify-content: start;
        align-items: center;
        gap: var(--gap-3);
        text-decoration: none;
        color: var(--project-link-color);
        font: var(--font-weight-500) var(--font-size-big) var(--font-family-default);
        text-transform: capitalize;
    }

    .locations {
        grid-column: 9 / -1;
        grid-row: 3 / 3;
        justify-content: start;
        align-items: center;
        gap: var(--gap-3);
        text-decoration: none;
        font: var(--font-weight-400) var(--font-size-big) var(--font-family-default);
        text-transform: capitalize;
    }

    .projectMore {
        grid-column: 7 / -1;
        grid-row: 4 / -1;
        justify-content: start;
        gap: var(--gap-3);
        font: var(--font-weight-400) var(--font-size-big) var(--font-family-default);
    }

    .explore .concrete:nth-child(even) {
        grid-column: 1 / 7;
    }

    .explore .concrete:nth-child(odd) {
        grid-column: 7 / -1;
    }
    .contact{
        grid-column: 5 / -5;
    }
}

@media (min-width: 1024px) {
    body {
        /*background: #609b6f86; */
    }

    :root {
        /*--left-right-main-container: 120px;*/
    }
    .modeButton{
        grid-column: 3 / 5;
        grid-row: 2 ;
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
    }
    header .hamburgerQuite,
    header .hamburgerOpen {
        display: none;
    }
    header{
        align-items: end;        
    }
    /*main menu for big screen*/
    header .mainMenu {
        width: max-content;
        height: min-content;
        grid-column: 2 / -2;
        grid-row: 2 ;
        place-self: end;
        display: grid;
        grid-template-columns: var(--left-right-main-container) 3fr 3fr var(--left-right-main-container);
        grid-template-rows: min-content;
        position: static;
        z-index: 1001;
        transition: margin-left 600ms ease-in-out;
        margin: 0;
    }


    .mainMenu .menuList {
        grid-column: 1 / -1;
        height: auto;
        width: 100%;
        flex-wrap: nowrap;
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: start;
        gap: var(--gap-20);
        padding: 0;
        /*margin-left: 100%;
        transform: translateX(-70%);*/
    }

    .menuList .menuItems {
        width: auto;
        height: auto;
        padding: var(--gap-5) 0;
        background: linear-gradient(to right, var(--mainMenu-link-color), var(--mainMenu-link-color));
        background-repeat: no-repeat;
        background-size: 0 2px;
        background-position: bottom center;
        transition: background-size .3s;
    }

    .menuList .menuItems:hover {
        background-size: 100% 2px;
    }

    .menuItems .menuLink {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--gap-5);
        font: var(--font-weight-400) var(--font-size-big) var(--font-family-default);
        text-decoration: none;
        color: var(--mainMenu-link-color)
    }

    /*main menu over */
    /* home elements*/
    .siteName{
    font: var(--font-weight-600) var(--font-size-big-x5) var(--font-family-default);
    }
    /* padding for 1024px*/
    .projects .slideContainer , .contact{
        padding: var(--padding-30);
    }

    .explore .stampedConcrete,
    .explore .moldedConcreteWall {
        grid-column: 1 / 5 !important;
    }

    .explore .polished,
    .explore .stampedConcreteWall {
        grid-column: 5 / 9 !important;
    }

    .explore .brushed,
    .explore .dryConcrete {
        grid-column: 9 / -1 !important;
    }

    /*.explore .concrete:nth-child(odd){
        grid-column: 5 / -1;
        background: #1f1970;
    }*/

    footer {
        grid-template-columns: var(--left-right-header-grid) 40px repeat(10, 1fr) 40px var(--left-right-header-grid);
        padding: var(--padding-35) 0;
    }

    footer .quickLinksArea {
        grid-column: 5 / 8;
        gap: var(--gap-10);
    }

    footer .socialMediaLinks {
        gap: var(--gap-10);
        grid-column: 2 / 5;
    }

    footer .newsletter {
        grid-column: 8 / -2;
        gap: var(--gap-10);
    }

    .newsletter .newsletterForm {
        gap: var(--gap-10);
    }

}

/*
@media (min-width: 1200px) {
    body{
        background: #ffff0070;
    }
    :root{
        --left-right-main-container: 150px;
    }
}*/
@media (min-width: 1200px) {
    .modeButton{
        grid-column: 5 / 6;
        grid-row: 2 ;
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
    }
    .projects .project {
        grid-template-columns: repeat(6, 1fr) 1.5fr 1.5fr .5fr .5fr 1fr 1fr;
    }

    .locations {
        grid-column: 8 / -1;
        grid-row: 3 / 3;
    }

    .projectMore {
        grid-column: 9 / -1;
        grid-row: 3 / -1;
    }
}