/**
 * Theme Name: Veranda
 * Template:   hello-elementor
 * 
 */
 @font-face {
  font-family: "outfit";
  src: url("./assets/fonts/Outfit.ttf") ;

}
:root{
    --Primary-color:#1b4d3e;
    --secondary-color:#ffbd59;
    --white-color:#ffffff ;
    --black-color:#2c2c2c;
    --grey-color:#f5f5f5;
}
body {
    font-family: Helvetica, sans-serif !important;
    background-color: var(--white-color) !important;
    
}
.hero-banner{
    position: relative;
    width: 100%;
    min-height: 120vh;
    background-image: url("./assets/images/banner.png");
    background-size: cover;
    background-position:10% 70%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    padding: 30px 0px ;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ======================= navbar ===================== */
.site-header{
    position:unset !important;
    width: 96% !important;
    height: 80px;
    background-color: var(--white-color);
    border-radius: 40px;
    display: flex;
    justify-content: start !important;
    gap: 10px;
    padding: 14px 0px !important;
    margin: 0px auto;
}
.header-inner{
   

    max-width: 100% !important;
}
.site-branding{
    border-right: 1px solid var(--grey-color) ;
    padding: 0px 30px;
}
.site-branding > .custom-logo-link > img {
    width: 180px  ;
}
.site-navigation{
    flex-grow: 1 ;
    padding: 0px 16px;

}
.site-navigation > .menu {
    width: 100%;
    height: 100%;
}
.site-navigation > .menu > .menu-item-10{
    flex-grow: 1 !important;
    display: flex;
    justify-content: end;
    align-items: center;

    
}

.site-navigation > .menu > li{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.site-navigation > .menu > li > a{
    height: 100%;
    position: relative;
    color: var(--black-color);
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 600;
    align-content: center;


    
}
.site-navigation > .menu > li > a::before{
    position: absolute;
    content: " ";
    width: 0%;
    height: 1px;
    background-color: var(--Primary-color);
    z-index: 1;
    bottom: 28%;
    transition: all 0.5s;
}
.site-navigation > .menu > li > a:hover::before{
   width: 70%;
   
}


.site-navigation > .menu > .menu-item-10> a{
    padding: 12px 30px;
    background-color: var(--Primary-color);
    color: var(--white-color);
    border-radius:26px;
    width: auto;
    transition: all 0.5s;
    font-weight: 300;

}
.site-navigation > .menu > .menu-item-10> a:hover{

    background-color: var(--black-color);
    color: var(--white-color);
}
.site-navigation-dropdown  {
    width: 96% !important ;
    min-height: calc(100vh - 180px) !important;
    top: 110px !important;
    left: 2% !important;
    border-radius: 40px !important;
} 
.site-navigation-dropdown > span{
    position: absolute;
    width: 1px;
    height: 1px;
    bottom: 50vh;
    left: 5%;
    box-shadow: 0px 0px 500px 100px var(--Primary-color);
    z-index: 9;

}
.site-navigation-dropdown > .menu  {
    border: none !important;

    padding: 20px !important;
  min-height: calc(100vh - 180px)  !important;
  

    border-radius: 40px !important;
} 
.site-navigation-dropdown > .menu > li {
    margin-top: 10px;
    margin-bottom: 10px;

} 
.site-navigation-dropdown > .menu > li > a{
    box-shadow: unset !important;
  background-color: transparent !important;
  color: var(--black-color)!important;
  font-size: 18px;
  font-weight: bold;
  text-transform: capitalize;
} 
/* ==================== */
.hero-banner-content{
    width: 90%;
    height: 600px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.hero-banner-content > h1{
    width: 100%;
    font-size: 100px;
    font-family: 'outfit' , sans-serif;
    text-align: center;
    color: var(--white-color);
    margin: 0px;
    font-weight: bold;


}
.hero-banner-content > p{
   width: 80%;
    font-size: 20px;
    color: var(--white-color);
    text-align: center;
    /* text-shadow: 0px 0px 20px var(--black-color); */
}
.hero-banner-cards{
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}
.hero-banner-card{
    width: 350px;
    height: 300px;
    background: #2c2c2c61;
    border-radius: 30px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #2c2c2c79;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
    
}
.hero-banner-card > span{
    width: 100%;
    color: var(--white-color);
    font-size: 18px;
    font-weight: 600;
    border-top:1px solid var(--Primary-color);
    padding-top: 10px;
}
.hero-banner-card > p{
    color: var(--grey-color);
    font-size: 14px
}
/* ====================================about ============================== */
.about{
    height: 600px; 
    width:100%; 
    border-radius:50px 50px 0px 0px; 
    margin-top:-150px;
    margin-bottom: 50px;
    background-color: var(--white-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 100px;

}
.about-header{
    
    margin-top: 200px;
    width: 35%;
    height: 100%;
}
.about-header > h1{
    position: relative;
  font-family: "outfit" , sans-serif;
  font-size: 100px;



}

.about-content{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,180px);
    margin-top: 250px;
    width: 65%;
    height: 100%;
    gap: 20px;
}
.about-keyLine{
    grid-column:span 3;
    font-size: 56px;
    line-height: 1;
  /* text-align: justify; */
  font-weight: bold;
}
.about-subKeyLine {
    text-align: justify;
    width: 100%;
}
.about-subKeyLine > div >h2{
  font-family: "outfit" , sans-serif;
}
.about-cards{
    position: relative;
    width: 100%;
    height: 800px;
    padding: 50px 100px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2,1fr);
    gap: 20px;
}
.about-cards > span {
    position: absolute;
    width: 1px;
    height: 1px;
    box-shadow: 0px 0px 250px 150px var(--secondary-color);
    left: 50%;
    top: 50%;
    z-index: -1;
}
.about-cards >div{
    /* From https://css.glass */
background: rgba(245, 245, 245, 0.53);
border-radius: 16px;
backdrop-filter: blur(7.2px);
-webkit-backdrop-filter: blur(7.2px);
border: 1px solid rgba(245, 245, 245, 0.3);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    padding: 30px;
}
.about-cards>div:first-of-type{
    grid-column: span 2;
    grid-row: span 2;
    background-image: url("./assets/images/about2.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.about-cards>div:last-of-type{

    background-image: url("./assets/images/about1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.about-cards >div > h6 {
    padding-bottom:10px ;
    border-bottom: 1px solid var(--Primary-color) ;
    width: 100%;
    font-size: 12px;
}
.about-cards >div > div > span {
    font-size: 56px;
    font-weight: bold;
}
.about-cards >div > div > p {
    font-size: 12px;
}
/* ==================================== services ======================================= */
.services{
width: 100%;
min-height: 700px;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
background-color: var(--grey-color);
padding: 100px;
gap: 30px;
}
.services-header{
    width: 100%;
    height: 200px;
    text-align: center;
}
.services-header > h1 {
    font-family: 'outfit',sans-serif;
    font-size: 100px;
}
.services-header > p {
    font-size: 16px;
}
.services-body{
    width: 100%;
    
        min-height: 500px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    
}
.services-media{
    width: 40%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 20px;
}
.services-media > img {
    width: 100%;
    height: 350px;
    border-radius: 30px;
}
.services-media > p {
    font-size: 28px;
        font-weight: bold;

}
.services-content{
    width: 60%;
    min-height: 500px;

}
.service-head{
    width: 100%;
    height: 120px;
    border-bottom: 1px solid var(--black-color) ;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.service-head > i {
    flex-grow: 1;
    text-align: end;
    font-size: 48px;
    color: var(--Primary-color);
}
.service-head > span{
    margin: 0px;
    font-size: 48px;
    color: var(--Primary-color);
}
.service-head > p{
    margin: 0px;
    font-size: 20px;
}
.service-content{
    width: 100%;
    /* height: 200px; */
    display: none;
    padding: 40px;
    flex-direction: column;
    justify-content: start;
    gap: 10px;
    margin: 0px 0px 20px 0px;
}
.service-content > p {
    font-size: 14px;
}
.service-content > span {
    font-size: 14px;
    font-weight: bold;
}
.service-content > ul > li {
    font-size: 14px;
    
}
/* ================================ projects ============================================ */
/* * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}*/

.projects {
    width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  background-color: var(--white-color);
  margin-bottom: 50px;
  margin-top: 50px;

}

/* Main Wrapper */
.projects-slider-container {
  /* position: relative; */
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.projects-slider-head{
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: end;
    align-items: center;
}
/* Horizontal Track */
.projects-slider-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 20px 0;
  width: 100%;
  /* box-shadow:  -50px 0px 150px  var(--secondary-color); */
  border-radius: 30px 0px 0px 30px;

}

/* Hide Scrollbars */
.projects-slider-track::-webkit-scrollbar {
  display: none;
}
.projects-slider-track {
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}

/* Card Styling */
.projects-card {
  min-width: 250px;
  height: 350px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.61), inset 0px 0px 250px var(--black-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;

}
.projects-card > h3{
    width: 100%;
    text-align: center;
    padding: 10px 5px;
    font-size: 22px;
    color: var(--grey-color);
    background-color: var(--Primary-color);
    border-radius: 10px;

}
.projects-card > p{
   color: var(--white-color);

}
.project-view{
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: #1b4d3e12;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    bottom: 0;
    z-index: 9999999;
}
.project-popup{
    height: 86vh;
    width: 80%;
    padding: 40px;
    background-color: var(--white-color);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 10px;
}
.project-close{
    width: 40px;
    height: 40px;
    align-self: end;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 100%;
    color: var(--white-color);
    background-color: var(--Primary-color);
    cursor: pointer;
}
.project-view-name{
    font-size: 30px;
    align-self: center;
    border-bottom: 3px solid var(--Primary-color);
    text-shadow: 0px 0px 30px var(--Primary-color);

}
.project-details{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    /* border: 1px solid var(--Primary-color); */
}
.project-details > p{
    font-size: 14px;
    margin: 0px;
    padding: 5px;
}
.project-media-grid{
    position: relative;
    padding: 0px 50px;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(2,1fr);
    gap: 10px;
    z-index: 1;
}
.project-media-grid > span{
    position: absolute;
    width: 1px;
    height: 1px;
    box-shadow: 0px 0px 200px 150px var(--secondary-color);
    left: 40%;
    bottom: 40%;
    z-index: -1;
}
.project-media-grid > div{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
  
}
.project-image2{
    grid-column-start: 3;
    grid-row-start: 1;

} 
.project-image3{
   grid-column-start: 3;
    grid-row-start: 2;
} 
.project-media-grid > div:first-of-type{
     grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;

}
.project-media-grid > div:last-of-type{
 grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 4;
    grid-row-start: 1;

} 
/* Navigation Buttons */
.nav-btn {
  /* position: absolute; */
  top: 50%;
  transform: translateY(-50%);
  background: var(--black-color);
  color: var(--white-color);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  font-size: 18px;
}
.nav-btn:hover { background: var(--Primary-color); }
.nav-btn:active { background: var(--Primary-color); }
.projects-slider-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 20px 0px;
  width: 100%;
}
/* =============================================== why =================================================== */
.why{
    width: 100%;
    min-height: 600px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0px 100px;
    gap: 50px;
    border-radius: 0px 0px 50px 50px;
    background-color: var(--white-color);
}
.why-col1{
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.why-col1 > h1 {
    font-size: 72px;
    width: 70%;
    font-weight: bold;

}
.why-col1 > div {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 50px;
}
.why-col1-media {
    width: 50%;
    height: 500px;
    background-image: url(./assets/images/why.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;

}
.why-col1-content {
    position: relative;
    width: 50%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}
.why-col1-content > div {
    background: rgba(245, 245, 245, 0.4);
    border-radius: 16px;
    backdrop-filter: blur(7.2px);
    -webkit-backdrop-filter: blur(7.2px);
    border: 1px solid rgba(245, 245, 245, 0.3);
    margin: 5px 0px;
    padding: 0px 5px;
}
.why-col1-content > span {
    position: absolute;
    width: 1px;
    height: 1px;
    box-shadow: 0px 0px 200px 150px var(--secondary-color);
    z-index: 0;
    right: 0px;
    bottom: 70%;
}
.why-col1-content > div > h3{
    font-size: 22px;
    font-weight: 600;
padding: 10px 5px;
margin: 0px;
}
.why-col1-content > div > p{
    font-size: 16px;
    padding:5px 5px ;
    margin: 0px;
}
.why-col2{
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 30px;
    padding: 20px;
}

.why-card{
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    background-color: var(--Primary-color);
    color: var(--white-color);
    padding: 40px;
    border-radius: 30px;
    z-index: 2;
}
.why-card > span{
    width: 100%;
    border-bottom: 1px solid var(--grey-color);
    padding: 10px;
   
}
.why-col2-content {
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}
.why-col2-content > div {
    background: rgba(245, 245, 245, 0.4);
    border-radius: 16px;
    backdrop-filter: blur(7.2px);
    -webkit-backdrop-filter: blur(7.2px);
    border: 1px solid rgba(245, 245, 245, 0.3);
    margin: 5px 0px;
    padding: 0px 5px;
}
.why-col2-content > div > h3{
    font-size: 22px;
    font-weight: 600;
    padding: 10px 5px;
    margin: 0px;
}
.why-col2-content > div > p{
    font-size: 16px;
padding:5px 5px ;
margin: 0px;
}
/* ======================================footer ====================================================== */
.cont{
    min-height: 350px;
    background-color: var(--grey-color);
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    border-radius: 50px 50px 0px 0px;
    margin-top: 40px;

}
.cont-container{
 width: 100%;
 height: 100%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 align-items: center;
 gap: 10px;

}
.cont-container > div:first-of-type{
    width: 50%;
   
}
.cont-container > div:first-of-type > h1{
    width: 100%;
    font-size: 46px;
    line-height: 1;
    font-weight: bold;
    text-transform: capitalize;
}
.cont-container > div:last-of-type{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 20px;
    
}
.cont-container > div:last-of-type > a{
    text-decoration: none; 
    color: var(--black-color);
    font-size: 26px;
    border-bottom: var(--Primary-color) 1px solid;

}
.site-footer{
    background-color: var(--grey-color);

}
/*============================================ media query ===============================================*/

@media (max-width: 376px) {
    .hero-banner{
        min-height: 130vh;
    }
.hero-banner-content{
    width: 100%;
    height: 400px;
}
.hero-banner-content > h1{
    width: 100%;
    font-size: 50px;
}
.hero-banner-content > p{
    font-size: 18px;
}
.hero-banner-cards{
    flex-wrap: wrap;
    width: 100%;
    min-height: 850px;
}
.hero-banner-card{
    width: 90%;
    height: 275px;
}
/* === about ===== */
.about{
   min-height: 800px; 
    
    border-radius:50px 50px 0px 0px; 
    margin-top:-100px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    padding: 20px;
    gap: 10px;
}
.about-header{
    
    margin-top: 150px;
    width: 200px;
    height: auto;
}
.about-header > h1{
  font-size: 70px;
}

.about-content{
    display: grid;
    margin-top: 0px;
    width: 100%;
    height: 600px;
    gap: 0px;
}
.about-keyLine{
    height: 150px;
    font-size: 20px;
    text-align: center;

}
.about-subKeyLine {
    height: 150px;
    grid-column:span 2;
    width: 100%;
    font-size: 12px;
}

.about-cards{
    width: 100%;
    min-height: 1200px;
    padding:  10px;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(5,1fr);
    gap: 20px;
}


.about-cards>div:first-of-type{
    height: 300px;
    grid-column: span 1;
    grid-row: span 1;

}
.about-cards>div:last-of-type{
    display: none;
}
/* ======= services ============   */
.services{

min-height: 700px;
padding: 10px;
gap: 10px;
}
.services-header{
 height: 250px;

}
.services-header > h1 {
    font-size: 70px;
}

.services-body{
    flex-wrap: wrap;
    gap: 10px;
}
.services-media{
    width: 100%;
    
}

.services-media > p {
    font-size: 18px;
}
.services-content{
    width: 100%;

}
/* ================ projects ================ */
.projects {
  flex-wrap: wrap;
  padding: 20px;
  min-height: 80vh;
}

/* Horizontal Track */
.projects-slider-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 20px 0;
  width: 100%;
}

.project-popup{
    height: 94vh;
    width: 90%;
    padding: 10px;
    border-radius: 10px;
    gap: 10px;

}
.project-close{
    width: 20px;
    height: 20px;
    font-size: 14px;
}
.project-view-name{
    font-size: 24px;

}
.project-details{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
   
}
.project-details > p{
    font-size: 14px;
    padding: 0px;
    text-align: center;
}
.project-media-grid{
    padding: 0px;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(5,1fr);
    gap: 5px;
}

.project-image2{
    grid-column-start: 1;
    grid-row-start: 3;

} 
.project-image3{
   grid-column-start: 2;
    grid-row-start: 3;
} 
.project-media-grid > div:first-of-type{
     grid-column: span 2;
    grid-row: span 0 / span 3;

}
.project-media-grid > div:last-of-type{
 grid-column:  span 2;
    grid-row: span 4 / span 6;


} 

/* ===========why ================== */
.why{
    min-height: 600px;
    flex-wrap:wrap;
    padding: 0px 10px;
    gap: 0px;
    margin-top: 50px;
}
.why-col1{
    width: 100%;
}

.why-col1 > h1 {
    font-size: 40px;
    width: 100%;
    text-align: center;

}
.why-col1 > div {
    flex-wrap: wrap;
    gap: 30px;
}
.why-col1-media {
    width: 100%;
    height: 400px;

}
.why-col1-content {
    width: 100%;
    height: 350px;
}
.why-col1-content > div > h3{
    font-size: 20px;
}
.why-col1-content > div > p{
    font-size: 14px;
}
.why-col2{
    width: 100%;
    padding: 0px;
}
.why-card{
    display: none;
}

.why-col2-content {
    width: 100%;
    height: 400px;

}
.why-col2-content > div > h3{
    font-size: 20px;
}
.why-col2-content > div > p{
    font-size: 14px;
}
/* ==== contact ======== */
.cont-container > div:first-of-type{
    width: 100%;
   
}
.cont-container > div:first-of-type > h1{
    width: 100%;
    font-size: 30px;
    padding: 20px;
    
}
.cont-container > div:last-of-type{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    
}
.cont-container > div:last-of-type > a{
    text-decoration: none; 
    color: var(--black-color);
    font-size: 20px;
    border-bottom: var(--Primary-color) 1px solid;



}
}

@media (min-width: 376px) and (max-width: 767px) {

        .hero-banner{
        min-height: 130vh;
    }
.hero-banner-content{
    width: 100%;
    height: 400px;
}
.hero-banner-content > h1{
    width: 100%;
    font-size: 50px;
}
.hero-banner-content > p{
    font-size: 18px;
}
.hero-banner-cards{
    flex-wrap: wrap;
    width: 100%;
    min-height: 850px;
}
.hero-banner-card{
    width: 90%;
    height: 275px;
}
/* === about ===== */
.about{
   min-height: 800px; 
    
    border-radius:50px 50px 0px 0px; 
    margin-top:-100px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    padding: 20px;
    gap: 10px;
}
.about-header{
    
    margin-top: 150px;
    width: 200px;
    height: auto;
}
.about-header > h1{
  font-size: 70px;
}

.about-content{
    display: grid;
    margin-top: 0px;
    width: 100%;
    height: 600px;
    gap: 0px;
}
.about-keyLine{
    height: 150px;
    font-size: 20px;
    text-align: center;

}
.about-subKeyLine {
    height: 150px;
    grid-column:span 2;
    width: 100%;
    font-size: 12px;
}

.about-cards{
    width: 100%;
    min-height: 1200px;
    padding:  10px;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(5,1fr);
    gap: 20px;
}


.about-cards>div:first-of-type{
    height: 300px;
    grid-column: span 1;
    grid-row: span 1;

}
.about-cards>div:last-of-type{
    display: none;
}
/* ======= services ============   */
.services{

min-height: 700px;
padding: 10px;
gap: 10px;
}
.services-header{
 height: 250px;

}
.services-header > h1 {
    font-size: 70px;
}

.services-body{
    flex-wrap: wrap;
    gap: 10px;
}
.services-media{
    width: 100%;
    
}

.services-media > p {
    font-size: 18px;
}
.services-content{
    width: 100%;

}
/* ================ projects ================ */
.projects {
  flex-wrap: wrap;
  padding: 20px;
  min-height: 80vh;
}

/* Horizontal Track */
.projects-slider-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 20px 0;
  width: 100%;
}

.project-popup{
    height: 94vh;
    width: 90%;
    padding: 10px;
    border-radius: 10px;
    gap: 10px;

}
.project-close{
    width: 20px;
    height: 20px;
    font-size: 14px;
}
.project-view-name{
    font-size: 24px;

}
.project-details{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
   
}
.project-details > p{
    font-size: 14px;
    padding: 0px;
    text-align: center;
}
.project-media-grid{
    padding: 0px;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(5,1fr);
    gap: 5px;
}

.project-image2{
    grid-column-start: 1;
    grid-row-start: 3;

} 
.project-image3{
   grid-column-start: 2;
    grid-row-start: 3;
} 
.project-media-grid > div:first-of-type{
     grid-column: span 2;
    grid-row: span 0 / span 3;

}
.project-media-grid > div:last-of-type{
 grid-column:  span 2;
    grid-row: span 4 / span 6;


} 
/* ===========why ================== */
.why{
    flex-wrap:wrap;
    padding: 0px 10px;
    gap: 0px;
    margin-top: 50px;
}
.why-col1{
    width: 100%;
}

.why-col1 > h1 {
    font-size: 56px;
    width: 100%;
    text-align: center;

}
.why-col1 > div {
    flex-wrap: wrap;
    gap: 30px;
}
.why-col1-media {
    width: 100%;
    height: 400px;

}
.why-col1-content {
    width: 100%;
    height: 400px;
}

.why-col2{
    width: 100%;
    padding: 0px;
}
.why-card{
    display: none;
}

.why-col2-content {
    width: 100%;
    height: 450px;

}
/* ==== contact ======== */
.cont-container > div:first-of-type{
    width: 100%;
   
}
.cont-container > div:first-of-type > h1{
    width: 100%;
    font-size: 30px;
    padding: 20px;
    
}
.cont-container > div:last-of-type{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    
}
.cont-container > div:last-of-type > a{
    text-decoration: none; 
    color: var(--black-color);
    font-size: 20px;
    border-bottom: var(--Primary-color) 1px solid;



}

}
@media (min-width: 767px) and (max-width: 992px) {
    /* === about ===== */
.about{
   min-height: 600px; 
    border-radius:50px 50px 0px 0px; 
    margin-top:-100px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    padding: 20px;
    gap: 10px;
}
.about-header{
    margin-top: 50px;
    width: 100%;
    height: auto;
}
.about-header > h1{
    width: 100%;
  font-size: 100px;
  text-align: center;

}

.about-content{
    margin-top: 0px;
    width: 100%;
    height: 400px;
    gap: 20px;
}
.about-keyLine{
    height: 150px;
    font-size: 48px;
    text-align: start;

}
.about-subKeyLine {
    height: 150px;
    grid-column:span 1;
    width: 100%;
    font-size: 12px;
}

.about-cards{
    width: 100%;
    min-height: 600px;
    padding:  20px;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,1fr);
    gap: 20px;
}


.about-cards>div:first-of-type{
    /* height: 300px; */
    grid-column: span 1;
    grid-row: span 3;
    

}
.about-cards>div:last-of-type{
    display: none;
}
/* =========== services  ======= */
.services{

padding: 20px;
gap: 10px;
}
.services-body{
    min-height: 500px;
    gap: 30px;
    
}

.services-media > p {
    font-size: 20px;

}
.services-content{
    width: 60%;
    min-height: 500px;

}
/* ================ projects ================ */
.projects {
  flex-wrap: wrap;
  padding: 20px;
  min-height: 80vh;
}

/* Horizontal Track */
.projects-slider-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 20px 0;
  width: 100%;
}

.project-popup{
    height: 90vh;
    width: 90%;
    padding: 20px;
    
}
.project-close{
    width: 30px;
    height: 30px;
    font-size: 20px;
   
}

.project-details{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

}
.project-details > p{
    font-size: 16px;

}
.project-media-grid{
    padding: 0px ;
    height: 50vh;
   
}


/* ==== why ====== */
.why{

    min-height: 600px;

    padding: 0px 10px;
    gap: 10px;
}


.why-col1 > h1 {
    font-size: 56px;
    width: 100%;

}
.why-col1 > div {
    gap: 10px;
}
.why-col1-media {
    height: 400px;
}
.why-col1-content {
    height: 500px;
}
.why-col1-content > div > h3{
font-size: 20px;
}
.why-col1-content > div > p{
    font-size: 14px;
}
.why-col2{

    gap: 20px;
    padding: 0px;
}
.why-card{
    width: 100%;
    height: 400px;
    padding: 30px;
}
.why-card > h1 {
    font-size: 30px;
}

.why-col2-content {
    width: 100%;
    height: 500px;

}
.why-col2-content > div > h3{
    font-size: 20px;

}
.why-col2-content > div > p{
    font-size: 14px;

}


}
@media (min-width: 993px) and (max-width: 1440px) {
    /* === about ===== */
.about{
    padding: 50px;

}

.about-keyLine{
   
    font-size: 48px;

}
.about-subKeyLine {
    text-align: justify;
    width: 100%;
}
.about-subKeyLine > div >h2{
  font-family: "outfit" , sans-serif;
}
.about-cards{

    height: 600px;
    padding: 10px 50px;

}
/* ========== services ============= */
.services{

padding: 50px;
gap: 10px;
}
.services-body{
    min-height: 500px;
    gap: 30px;
    
}

.services-media > p {
    font-size: 24px;

}
.services-content{
    width: 60%;
    min-height: 500px;

}

/* ========= projects ======= */

/* Main Wrapper */
.projects-slider-container {
  /* position: relative; */
  width: 60%;

}
.project-popup{
    height: 90vh;
    width: 90%;
    padding: 20px;
    /* justify-content: space-around; */
}
.project-close{
    width: 30px;
    height: 30px;
    font-size: 20px;
   
}

.project-details{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

}
.project-details > p{
    font-size: 16px;

}
.project-media-grid{
    padding: 0px ;
    max-height: 60vh;
   
}


/* ==== why ====== */
.why{


    padding: 0px 20px;
    gap: 10px;
}


.why-col1 > h1 {
    font-size: 64px;
    width: 100%;

}
.why-col1 > div {
    gap: 10px;
}
.why-col1-media {
    height: 400px;
}
.why-col1-content {
    height: 400px;
}
.why-col1-content > div > h3{
font-size: 20px;
}
.why-col1-content > div > p{
    font-size: 14px;
}
.why-col2{

    gap: 20px;
    padding: 0px;
}
.why-card{
    width: 100%;
    height: 400px;
    padding: 30px;
}
.why-card > h1 {
    font-size: 34px;
}

.why-col2-content {
    width: 100%;
    height: 400px;

}
.why-col2-content > div > h3{
    font-size: 20px;

}
.why-col2-content > div > p{
    font-size: 14px;

}

}
/* ////////////////// */