html, body {
 height: 100%;
 margin: 0;
 font-family: "Abel", sans-serif;
}

.main-container{
 display: grid;
 justify-content: center;
 width: 100%;
 padding: 0;
 margin: 0;
 position: relative;
 overflow: hidden;
 /* background-image: url("./images/home/blue-bg2.png"); */
 background-size: contain;
}

.projects-wrapper{
 width: 100%;
 padding: 0;
 margin: 0;
 position: relative;
 overflow: hidden;
 /* background-image: url("./images/home/blue-bg2.png"); */
 background-size: contain;
}

.cover-background{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(72, 72, 71,0.5);
}

.main-menu{
 position: fixed;
 top: 0;
 left: 0;
 height: 100%;
 display: inline-flex;
 z-index: 1000;
}

.menu-icon{
 text-align: left;
 width: 30px;
 height: 30px;
 padding-left: 10px;
 padding-top: 10px;
 scale: 2.5;
}

.menu label {
 display: block;
 cursor: pointer;
 max-width: 150px;
 max-height: 150px;
}

.menu input {
 display: none;
}


.menu-path {
 fill: none;
 stroke: #00B1F4;
 stroke-width: 3;
 stroke-linecap: round;
 stroke-linejoin: round;
 --length: 24;
 --offset: -38;
 stroke-dasharray: var(--length) var(--total-length);
 stroke-dashoffset: var(--offset);
 transition: all .8s cubic-bezier(.645, .045, .355, 1);
}

.menu--1 {
 background: transparent;
}
 .menu--1 .line--2 {
  --total-length: 70;
}

.cross input:checked+svg .line--1,
  .cross input:checked+svg .line--3 {
    --length: 22.627416998;
  }
  .cross input:checked+svg .line--2 {
   --length: 0;
 }

 .back input:checked+svg .line--1,
  .back input:checked+svg .line--3 {
    --length: 8.602325267;
  }

  .menu--1 .line--1,
  .menu--1 .line--3 {
    --total-length: 126.64183044433594;
  }

.cross input:checked+svg {
 .line--1 {
  --length: 22.627416998;
 }
 
 .line--3 {
   --length: 22.627416998;
 }
 .line--2 {
   --length: 0;
 }
}

.menu--1 input:checked+svg .line--1,
.menu--1 input:checked+svg .line--3 {
  --offset: -94.1149185097;
}

.menu--1 input:checked+svg .line--2 {
  --offset: -50;
}

.logo-container{
 width: 30vw;
 height: 20vw;
 position: fixed;
 top: 1vw;
 right: 1vw;
 z-index: 1000;
}

.logo-container img{
 width: 100%;
}

.main-menu-container{
 text-align: left;
 height: 100%;
 overflow-y: scroll;
 display: none;
 padding-right: 30px;
 padding-top: 30px;
}
div::-webkit-scrollbar {
 display: none;
}

.main-menu-list{
 padding: 0;
 margin: 0;
 list-style-type: none;
}

.main-menu-list li a{
 text-decoration: none;
}

.menu-1{
 padding-top: 1.5rem;
 padding-bottom: 0.8rem;
}
.menu-1 a{
 color: #00B1F4 ;
 font-size: 24px;
 font-weight: 300;
}

.menu-2 a{
 color: white;
 font-size: 22px;
 font-weight: 100;
}

/* Home structure*//* Home structure*//* Home structure*//* Home structure*//* Home structure*//* Home structure*//* Home structure*//* Home structure*//* Home structure*//* Home structure*/
/* Home structure*//* Home structure*//* Home structure*//* Home structure*//* Home structure*//* Home structure*//* Home structure*//* Home structure*//* Home structure*//* Home structure*/

.home-video{
 width: 100%;
 display: block;
 position: relative;
}
.center{
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 width: 80%;
}
.text-center{
 text-align: center;
}

.text-logo{
  font-size: 4vw;
}

.teal{
 color: #00B1F4;
}
.white{
 color: white;
}
.left-bottom-home{
 position: absolute;
 bottom: 0;
 left: 0;
 padding: 3vw;
 text-align: start;
 font-size: 3vw;
 color: white;
 font-family: inherit;
 pointer-events: none;
}
.overlay-div{
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 width: 100%;
 height: 100%;
 background-color: #00B1F4;
}
.overlay-div:hover{
 /* opacity: 0.3; */
 animation-name: fadeIn;
 animation-duration: 0.3s;
 animation-fill-mode: forwards;
}

@keyframes fadeIn {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 0.5;
 }
}

.overlay-div-text{
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 width: 100%;
 height: 100%;
}
.overlay-div-text:hover{
 opacity: 1;
}

.home-project{
 position: relative;
 cursor: pointer;
 box-shadow: 0 10px 15px rgba(0,0,0,0.6);
 max-height: 500px;
}
.home-project img{
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.home-image{
 display: block;
 /* width: 50vw; */
}
.home-grid{
 display: block;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}



/* New-current-part*//* New-current-part*//* New-current-part*//* New-current-part*//* New-current-part*//* New-current-part*//* New-current-part*//* New-current-part*//* New-current-part*//* Home structure*/
.news-container{
 width: 100%;
 display: grid;
 justify-content: center;
 align-items: : center;
 top: 0;
 left: 0;
}

.news-card{
 width: 70%;
 padding: 30px;
 display: grid;
 background-color: white;
 margin-bottom: 15px;
}
.news-card .image img{
 width: 100%;
}
.news-card .details{
 padding-left: 0;
}
.news-card .details .title, .news-card .details .read-button{
 font-size:26px;
}
.news-card .details .description{
 padding-top: 20px;
 padding-bottom: 10px;
}




/* Overview-structure*//* Overview-structure*//* Overview-structure*//* Overview-structure*//* Overview-structure*//* Overview-structure*//* Overview-structure*//* Overview-structure*//* Overview-structure*//* Home structure*/

.overview-container{
 width: 100%;
 display: flex;
 flex-wrap: wrap;
}
.overview-card{
 display: grid;
 align-items: end;
 background-color: white;
}
.overview-card .details{
 height: 80%;
 padding: 30px;
 display: grid;
 justify-content: space-around;
}
.image-change-first{
 display: block;
}
.image-change-second{
 display: none;
}
.overview-card .details .button{
 text-decoration: none;
 color: teal;
}


.tab-menu{
 padding: 28px;
 padding-left: 50px ;
 background-color: #202020;
 display: grid;
 align-items: center;
}
.tab-item1{
 font-size: 24px;
 padding-left: 40px;
 padding-right: 20px;
 text-decoration: none;
}
.tab-item{
 font-size: 20px;
 padding-inline: 10px;
 color: #a6a7ab;
 text-decoration: none;
}
.active-tab-item{
 color: white;
}
.tab-item:hover{
 color: white;
}


/* PROJECTS STRUCTURE*//* PROJECTS STRUCTURE*//* PROJECTS STRUCTURE*//* PROJECTS STRUCTURE*//* PROJECTS STRUCTURE*//* PROJECTS STRUCTURE*//* PROJECTS STRUCTURE*//* PROJECTS STRUCTURE*//* PROJECTS STRUCTURE*//* Home structure*/

.projects-container{
 width: 100%;
 display: flex;
 flex-wrap: wrap;
}
.project-card{
 height: 400px;
 position: relative;
 background-size: cover;
}

.project-image{
 object-fit: cover;
 height: auto;
 width: 100%;
 height: 100%;
}
.project-cover{
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: space-between; 
 top: 0;
 left: 0;
 text-decoration: none;
 /* background-color: rgba(46, 52, 64, 0.8) */
}
.project-cover:hover{
 animation-name: fadeIn2;
 animation-duration: 0.8s;
 animation-fill-mode: forwards;
}
.project-cover >div:first-child{
 background-color: rgba(46, 52, 64, 0.8);
 opacity: 0;
}

.project-cover >div:first-child:hover{
 /* opacity: 0.3; */
 animation-name: fadeIn2;
 animation-duration: 0.8s;
 animation-fill-mode: forwards;
}
@keyframes fadeIn2{
 from{
  opacity: 0;
 } to{
  opacity: 1;
 }
}
.projects-button{
 width: 100%;
 position: absolute;
 bottom: 0;
 display: flex;
 justify-content: space-between;
 font-size: 20px;
 opacity: 1;
}
.projects-button div{
 padding: 10px;
}
.gray{
 color: #a6a7ab;
}
.project-title{
 padding: 20px;
}


/* ABOUT-US STRUCTURE*//* ABOUT-US STRUCTURE*//* ABOUT-US STRUCTURE*//* ABOUT-US STRUCTURE*//* ABOUT-US STRUCTURE*//* ABOUT-US STRUCTURE*//* ABOUT-US STRUCTURE*//* ABOUT-US STRUCTURE*//* ABOUT-US STRUCTURE*/


.about-card{
 width: 80%;
 padding-bottom: 20px;
 margin-bottom: 15px;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 /* gap: 50px; */
}
.about-card div img{
 width: 100%;
}
.about-title{
 color: white;
 font-size: 18px;
 font-weight: 700;
}
.about-description{
 color: white;
 font-size: 14px;
}
.about-button a{
 color: #00B1F4;
}
.about-description p a{
 color: white;
}



/* CONTACT US*//* CONTACT US*//* CONTACT US*//* CONTACT US*//* CONTACT US*//* CONTACT US*//* CONTACT US*//* CONTACT US*/

.contact-container{
 display: flex;
 flex-wrap: wrap;
 background: white;
 width: 100vw;
}
.portfolio-container{
 display: flex;
 flex-wrap: wrap;
 background-color: white;
 width: 100vw;
 flex-direction: column-reverse;
}
.contact-details, .portfolio-details{
 padding-top: 100px;
 padding-bottom: 100px;
}
.contact-details div, .portfolio-details div{
 padding-left: 100px;
 padding-right: 30px;
}
.dark{
 color: #484847;
}
.contact-details .text-description span a, .portfolio-details .text-description span a{
 /* text-decoration: none; */
 color: #484847;
}

.contact-map a .map-icon div img{
 width: 10vw;
 max-width: 80px;
 height: auto;
}
.contact-map{
 
 position: relative;
}
.contact-map{
 
 width: 100%;
 height: 100vh;
}
.contact-map  img{
 position: absolute;
 /* width: 100%; */
 width: 100%;
 height: 100vh;
}
.contact-map a{
 height: 100%;
 display: grid;
 align-items: center;
 text-decoration: none;
}
.contact-map a .map-icon{
 height: 30%;
 display: grid;
}
.contact-map a .map-icon:hover{
 scale: 1.1;
}
.contact-map a .map-icon div:first-child {
 display: flex;
 justify-content: center;
 align-items: center;
}
.contact-map a .text-title{
 color: white;
 z-index: 1;
 display: flex;
 justify-content: center;
 align-items: center;
}
/* Responsive*//* Responsive*//* Responsive*//* Responsive*//* Responsive*//* Responsive*//* Responsive*//* Responsive*//* Responsive*//* Home structure*/

.text-title{
 font-size: 20px;
}
.text-description{
 font-size: 14px;
 padding-top: 20px;
 padding-bottom: 20px;
}
.text-project{
 font-size: 24px;
}
.page-title{
 font-size: 30px; 
 text-align: start; 
 padding: 15px;
 padding-top: 50px;
 width: 80%;
}

@media only screen and (min-width: 768px) {
 /* For desktop: */
 .col-1 {width: 8.33%;}
 .col-2 {width: 16.66%;}
 .col-3 {width: 25%;}
 .col-4 {width: 33.33%;}
 .col-5 {width: 41.66%;}
 .col-6 {width: 50%;}
 .col-7 {width: 58.33%;}
 .col-8 {width: 66.66%;}
 .col-9 {width: 75%;}
 .col-10 {width: 83.33%;}
 .col-11 {width: 91.66%;}
 .col-12 {width: 100%;}


 .menu-icon{
  width: 3vw;
  height: 3vw;
 }
 .main-menu-container{
  text-align: left;
  height: 100%;
  overflow-y: scroll;
  display: none;
  padding: 30px;
 }

 .main-menu-list{
  padding: 0;
  margin: 0;
  list-style-type: none;
 } 
 
 .menu-1 a{
  font-size: 2vw;
 }
 
 .menu-2 a{
  font-size: 1.8vw;
 }
 .logo-container{
  width: 20vw;
  height: 20vw;
  top: 1vw;
  right: 1vw;
 }

 .home-grid{
  display: flex;
 }
 .news-container{
  max-width: 1200px;
  padding-top: 5vw;
  padding-bottom: 5vw;
 }
 .news-card{
  width: 100%;
  padding: 30px;
  display: flex;
  background-color: white;
  margin-bottom: 15px;
 }
 .news-card .details{
  padding-left: 30px;
 }
 
 .text-title{
  font-size: 24px;
  font-weight: 300;
 }
 .text-description{
  font-size: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
 }
 .text-project{
  font-size: 24px;
  font-weight: 800;
 }
 .image-change-first{
  display: none;
 }
 .image-change-second{
  display: block;
 }
 .tab-menu{
  display: flex;
 }
 

 .about-title{
  color: white;
  font-size: 20px;
  font-weight: 800;
 }
 .about-description{
  color: white;
  font-size: 24px;
 }
 
 .page-title{
  font-size: 44px; 
  text-align: start; 
  padding: 24px;
  width: 80%;
 }

 /* .contact-container{
  background: linear-gradient(90deg, rgba(84,84,84,1) 0%, rgba(255,255,255,1) 5%, rgba(255,255,255,1) 100%);
 } */
 .portfolio-container{
  background: linear-gradient(rgba(84,84,84,1) 0%, rgba(255,255,255,1) 5%, rgba(255,255,255,1) 100%);
  width: 100vw;
  flex-direction: unset;
 }

  .text-logo{
    font-size: 4vw;
    line-height: 150px;
  }
}
@media only screen and (min-width: 1024px) {
 
 .text-title{
  font-size: 24px;
  font-weight: 400;
 }
 .text-description{
  font-size: 14px;
 }
 .text-project{
  font-size: 26px;
  font-weight: 800;
 }
}

@media only screen and (min-width: 1200px) {
 
 .text-title{
  font-size: 26px;
  font-weight: 600;
 }
 .text-description{
  font-size: 16px;
 }
 .text-project{
  font-size: 28px;
  font-weight: 800;
 }
 
 .page-title{
  font-size: 54px; 
  text-align: start; 
  padding: 30px;
 }
 .logo-container{
  width: 13vw;
  height: 137vw;
  top: 2vw;
  right: 2vw;
 }
}

@media only screen and (min-width: 1400px) {
 
 .text-title{
  font-size: 26px;
  font-weight: 600;
 }
 .text-description{
  font-size: 18px;
 }
 .text-project{
  font-size: 30px;
 }
}