/*
Theme Name: BassemFekry.
Theme URI: bassemfekry.com
Description: Home - Social Links
Version: 1.0
Author: BassemFekry
Author URI: bassemfekry.com
*/
* {
  box-sizing: border-box;
  outline: none !important;
  border: none !important;
}
html{
  max-width: 100%;
  /* background-image: linear-gradient(rgb(24, 24, 24), rgba(0, 0, 0, 01)) !important; */
  /* overflow: hidden; */
      /*scroll-behavior: smooth;*/

}
body {
     max-height: 100vh; /* or a % based on parent */
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(rgb(24, 24, 24), rgba(0, 0, 0, 01)) !important;
  background-attachment: fixed;
 
}

/* Set a maximum width for videos */
.work a[data-fancybox="vimeo"] {
  max-width: 100%;
}
.description {
  font-family: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", sans-serif !important;
  font-size: 14px;
  line-height: 1.6;
  background: #2b2b2b;
  border: 1px solid #55ac6f;
  padding: 10px;
  color: #d8d8d8;
  border-radius: 6px;
  margin-top: 20px !important;/* ✅ this is the key */
}



/* Adjust iframe dimensions for smaller screens */
.work a[data-fancybox="vimeo"] iframe {
  max-width: 100%;
  height: auto;
}
          .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .star {
            position: absolute;
            background: #fff;
            border-radius: 50%;
            animation: twinkle 2s linear infinite, moveStars 20s linear infinite;
        }

        .fixed-stars {
            position: absolute;
        }

        @keyframes twinkle {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        @keyframes moveStars {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-100vh);
            }
        }

        .modal {
          color:#000 !important;
          display: none;
          position: fixed;
          z-index: 2;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.4);
          display: flex;
          justify-content: center;
          align-items: center;
      }
      
      .modal-content {
          background-color: #fefefe;
          padding: 20px;
          border: 1px solid #888;
          text-align: center;
          border-radius: 5px;
          box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      }
      
      .close {
          color: #aaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
          cursor: pointer;
      }
      
      .close:hover {
          color: #000;
      }
      
      .iframe-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        padding-top: 25px;
        height: 0;
        overflow: hidden;
      }
      
      .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      
#title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: #FFF;
  text-align: center;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 50px;
  letter-spacing: 10px;
  margin-top: -60px;
  padding-left: 10px;
}
#title span {
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}
*{
  padding:0;
  margin:0;
  box-sizing: border-box;
  font-family: a-day-without-sun-text, sans-serif;
  /* font-family: "abolition", sans-serif; */
  /* font-family: 'Forum', serif; */
  /* font-family: "bd-supper", sans-serif; */
  /* font-weight: 200; */
  /* font-style: normal; */
}

li,.header-text,.sub-title,.sub-title-contact,form,.btn{
  text-transform: uppercase;
}
body{
  /* background: #080808; */
  color: #fff;
  /* background-image: linear-gradient(rgb(24, 24, 24), rgba(0, 0, 0, 01)) !important; */
  /* background-repeat: no-repeat; */
  /* background-size: cover; */
  /* height: 200%; */

}
.cap-tcha{
    padding-top:15px !important;
}
.category-buttons .btn {
  padding: 14px 28px;
  font-size: 16px;
  border: 2px solid #55ac6f;
  background-color: transparent;
  color: #B4F8C8;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  top: 0;
  transition: all 0.2s ease;
  font-family: inherit;
}
.category-heading {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 50px auto 30px;
  color: #55ac6f;
}

.category-label {
  font-size: 13px;
  color: #aaa;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid #333;
}

.category-buttons .btn.active {
  background-color: #55ac6f;
  color: #ffffff !important; /* ✅ force white */
  top: -4px;                 /* ✅ lift it slightly */
  z-index: 1;
  font-weight: bold;
}
.copy-btn {
  display: none !important;
}
/* Base state: hidden */
.expression-content {
  max-height: 0;
  opacity: 0;
  transform: scaleY(0.95);
  overflow: hidden;
  transform-origin: top;
}

/* Expand animation */
.expression-content.expanding {
  transition:
    max-height 0.5s cubic-bezier(0.5, 0.55, 0.55, .5),
    opacity 0.6s ease-in-out,
    transform .2s ease-in-out;
  max-height: 800px;
  opacity: 1;
  transform: scaleY(1);
}

/* Collapse animation */
.expression-content.collapsing {
  transition:
    max-height 0.5s cubic-bezier(0.5, 0.5, 0.55, 1),
    opacity .5s ease-out,
    transform .5s ease-out;
  max-height: 0;
  opacity: .3;
  transform: scaleY(0.95);
}



.expression-code {
  position: relative;
  z-index: 1000;
  overflow: visible;
}

.expression-block {
  font-family: arial !important;
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

.expression-code[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #28292d;
  color: #B4F8C8;
  padding: 8px 10px;
  border: 1px solid #55ac6f;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 14px;
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
}

.expression-tooltip {
  position: fixed;
  background-color: #111;
  color: #ffffff;
  border: 1px solid #55ac6f;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  /* text-transform: uppercase; */
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -100%);
  display: none;
}



.expression-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  cursor: pointer;
}
.expression-code {
  position: relative;
  cursor: pointer;  transition: background-color 0.2s ease;
  font-family: 'Courier New', monospace;
  background-color: #111;
  border-left: 4px solid #55ac6f;
  padding: 12px;
  display: block;
  color: #B4F8C8;
  font-size: 15px;
  line-height: 1.6;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  overflow: hidden; /* so the overlay doesn't overflow */
}
.expression-code:hover {
  background-color: #2a2a2a;
}
.expression-code::after {
  content: "Click to copy";
  position: absolute;
  bottom: 100%;
  left: 10px;
  background: #333;
  color: #B4F8C8;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1;
}

.copied-label {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 13px;
  background: #ff0000;
  color: #ff0000;
  padding: 3px 8px;
  border-radius: 4px;
  opacity: 0;
  animation: fadeInOut 1.5s ease forwards;
  pointer-events: none;
}
.copied-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background-color: rgba(85, 172, 111, 0.9);
  color: #000;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  animation: popFade 1.2s ease forwards;
}

@keyframes popFade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}



.description {
  margin-top: 12px;
  background: #2a2a2a;
  border-left: 4px solid #8ecae6;
  padding: 10px 12px;
  color: #f1f1f1;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.expression-block {
  background: #1a1a1a;
  border: 2px solid #55ac6f;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 0 10px rgba(85, 172, 111, 0.2);
}
.expression-description {
  font-family: 'Fira Code', monospace;
  font-size: 15px;
  color: #c8facc;
  background: none;
  border: none;
  padding: 0;
  margin-top: 10px;
  line-height: 1.5;
}

/*----------------------------------*/



/* Make sure tooltips can render HTML content */
.expression-section {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 15px; /* to keep spacing */
}

.expression-section.active {
    display: block;
  max-height: 5000px; /* enough to show content */
  overflow: visible;
  padding: 0px 15px;
}

.expressions-container.hidden {
  display: none;
}
.expression-block[data-tooltip-html]:hover::after {
  content: none;
}

.tooltip-html {
  font-family: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", sans-serif !important;
  font-size: 14px;
  line-height: 1.5;
  position: absolute;
  bottom: 100%;
  left: 20px;
  background-color: #28292d;
  color: #B4F8C8;
  padding: 8px;
  border: 1px solid #55ac6f;
  border-radius: 6px;
  white-space: normal;
  width: 250px;
  z-index: 10;
}

.search-container {
  position: relative;
  z-index: 10000 !important;
  background-color: rgba(26, 26, 26, 0.85);
  padding: 15px 20px;
  border-radius: 30px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 30px;
  box-shadow: 0 0 6px rgba(85, 172, 111, 0.3);
}

#searchInput {
  width: 100%;
  padding: 12px 40px 15px 20px; /* ← extra right padding for the X */
  font-size: 16px;
  border: 1.5px solid #55ac6f;
  border-radius: 30px;
  background-color: #1a1a1a;
  color: #B4F8C8;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
  box-shadow: inset 0 0 3px rgba(85, 172, 111, 0.25);
}
.clear-btn {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  line-height: 22px;
  background-color: #ffffff;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  display: none;
  z-index: 2;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.clear-btn:hover {
  background-color: #8f3a3a;
  color: #fff;
}

#searchInput:not(:placeholder-shown) + .clear-btn {
  display: block;
}

#searchInput::placeholder {
  color: #99c999;
}

#searchInput:focus {
  border-color: #a5d6a7;
  box-shadow: 0 0 8px 2px #55ac6f;
}



.tooltip-html .highlight-tip {
  color: #FFD700;
  font-weight: bold;
}

.category-buttons .btn.active {
  background-color: #55ac6f;
  color: #000;
  font-weight: bold;
}


p{
  margin-bottom: 0px !important;
}
.stretched-link {
  display: block;
  width: 100%;
  height: 100%;
}
#header{
  width:100%;
  height: 100vh;
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)),url("../assets/main/giphy.gif"); */
  background-size: cover;
  background-position: center;
}
.temp{
  z-index: 2 !important;
  transform: rotate(0) !important;
}
div.test {
  transform: rotate(0) !important;
   }
.home{
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url("../assets/main/giphy.gif"); */
}
.portfolio{
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url("../assets/main/home.jpeg"); */
}
.contact{
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url("../assets/main/home.jpeg"); */
}
.about{
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url("../assets/main/home.jpeg"); */
}
.showreel{
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url("../assets/main/home.jpeg"); */
}
.portfolio-padding{
  /* padding-top: 50px !important; */
}
.container{

  /*overflow-y: auto;*/
  padding-right: 10px; /* avoid hiding scrollbar */
  padding: 40px 10%;
  padding-bottom: 0px !important;
}
.active{
  color:#B4F8C8;
  
}
iframe{
  width: 1280px;
    height: 720px;
}
.home-btn{
  text-align: center;
  padding-top: 30px;
}

.home-btn a img{
  transition: all 0.5s ease;
  scale: 1;
  padding: 10px;
  opacity: .8;
}
.home-btn a img:hover{
  opacity: 1;
  scale:1.02;
  transform: translateY(-20px);
  transition: all 0.5s ease;
}
nav ul li a.active::after {
  content: '';
  width: 100%;
  height: 3px;
  background: #B4F8C8;
  position: absolute;
  left: 0;
  bottom: -6px;
  transition: 0.5s;
}

.downloadcv{
  /* padding-top: 70px; */
}
.margin-top{
  margin-top: 15px;
}
.padding-bottom{
  padding-bottom: 15px;
}
nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

}
.logo{
  z-index: 1 !important;
  width:100px;
}
.sidemenu{
  opacity: 1;
}
nav ul li{
  display: inline-block;
  list-style: none;
  margin: 10px 20px;

}
nav ul li a{
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  position: relative;

}

nav ul li a::after{
  content:'';
  width: 0;
  height: 3px;
  background:#B4F8C8;
  position: absolute;
  left: 0;
  bottom: -6px;
  transition:0.5s;
}
nav ul li a:hover::after{
  width:100%;
}
nav ul li a:hover{
  color:#B4F8C8
  /* color: #fff !important; */
}

.header-text{
  text-align: center;
  margin-top:10%;
  font-size: 40px;

}
.header-text h1{
  font-size: 5rem;
  margin-top: 20px;
  font-weight: 600;

}
/* ---------------about-------------------- */
#about{
  /* padding:80px 0; */
  color:#ababab;

}
.about-section{
    margin: 220px;
    padding: 30px;
  /* margin: 200px; */
  background: #28292dea;
  border-style: solid;
  border-color: #B4F8C8;
  border-width: 2px;
  border-radius: 15px;
  padding: 30px;
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  transition: 0.5s;

}
.singlebg-section{
  height: auto;
  font-size: 24px;
  background: #28292dea;
  border-style: solid;
  border-color: #B4F8C8;
  border-width: 2px;
  border-radius: 15px;
  padding: 15px;
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  transition: 0.5s;
}
.auto-height{
  height: auto !important;
  margin-top: 20px !important;
}
.about-section:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  opacity: 1;
}
.row{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.row-portfolio{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.about-col-1{
  flex-basis: 35%;
}
.about-col-1 img{
  border-style: solid;
  border-width: 2px;
  border-color: #B4F8C8;
  width:100%;
  border-radius: 15px;

}

.about-col-2{
  flex-basis: 60%;
  line-height: 30px;
}
.about-col-2 p{
  color: #d8d8d8;
  font-weight: 600;
  font-size: 22px;
}
.about-col-3 p{
  color: #d8d8d8;
  font-weight: 600;
  font-size: 25px;
}
.sub-title{
  text-align: center;
  font-size: 60px;
  font-weight: 600;
  color: #fff;
  padding-bottom: 20px;
}

.about-section{
  margin-top: 00px !important;
}
.tab-titles{
  display: flex;
  margin: 20px 0 40px;
}
.tab-links{
  margin-right: 50px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
}

.tab-links::after{
  content: '';
  width: 0;
  height: 3px;
  background:#B4F8C8;
  position: absolute;
  left: 0;
  bottom: -8px;
  transition: .5s;
}

.tab-links.active-link::after{
  width:50%;
}
/*--------------------------------------- portfolio--------------------------------------- */
.divider {
  width: 2px;
  height: 30px; /* Adjust height as needed */
  background-color: rgb(255, 255, 255); /* Adjust color as needed */
  margin: 0 10px; /* Adjust margin as needed */
  display: inline-block;
  vertical-align: middle;
}

.row-padding{
  /* padding: 0px; */
  /* margin: 10px; */
}
#Portfolio{
  
}
.work-list{
  /* display: grid; */
  /* margin-top: 20px; */
}
.text-center{
  text-align: center;
  padding-bottom: 10px;
}
.port-filter-buttons{
  text-decoration: none;
  
}
#motion_graphics_btn{
  background-color: linear-gradient(rgba(61, 0, 0, 0),#05020200);
}
.work{
  margin: 5px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.work img{
  opacity: .7;
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  transition: transform 0.2s;
  scale: 1;
  width:300px !important;
}

.work h3 {
  scale:1;
  font-weight: 600;
  color: #fff;
  font-size: 25px;
}
a h3{
  padding:0 20px;
}
.centered {
  
  display: grid;
  align-content: center !important;
}
.layer a{
  text-decoration: none;
}
.layer{
  width: 100%;
  height:100%;
  opacity: 0;
  background: linear-gradient(rgba(61, 151, 167, 0.4),#050202);
  /* border-radius: 5px; */
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* padding:0 40px; */
  text-align: center;
  font-size: 14px;
  transition:   0.3s;
  /* scale: 1; */
}
.layer h3{
  transition: .3s;
  scale:0;
  font-weight: 500;
  /* margin-bottom: 20px; */

}
.layer a{
  /* margin-top: 20px; */
  /* color:#B4F8C8; */
  /* text-decoration: none; */
  /* font-size: 18px; */
  /* line-height: 60px; */
  /* background: #fff; */
  /* width: 60px; */
  /* height: 60px; */
  /* border-radius: 50%; */
  /* text-align: center; */
}
.work:hover img{
  opacity: 1;
  transform: scale(1.1);
  /* -webkit-filter: blur(2px); Safari 6.0 - 9.0 */
  filter: blur(1.5px);
}
.work:hover h3{
  opacity: 1;
  scale: 1;
}
.work:hover .layer{
  
  /* transform:translateY(-10px); */
  /* height: 100%; */
  opacity: 1;
  /* left: auto; */
  /* right: auto; */
  /* width: 100%; */
}

.swiper-slide{
  padding: 5px 0px 5px 0px;
}
.btn{
  display: block;
  margin: 10px 0;
  width: fit-content;
  border: 1px solid #B4F8C8;
  padding: 14px 50px;
  border-radius: 6px;
  text-decoration: none;
  color: #fff;
  transition: 0.5s;

}

.btn:hover{
  background: #B4F8C8;
}

/* -----------------------------single----------------------------------- */
.project-title-padding-top{
  padding-top: 18.5px;
}
.project-desc{
  height: 170px !important;
}
.mb-3{
  margin-top: 10px;
}
.slide-container{
  max-width: 1120px;
  width: 100%;
  padding: 40px 0;
}
.slide-content{
  /* margin: 0 40px; */
  overflow: hidden;
  /* border-radius: 25px; */
}
.card{
  /* margin-right:10px !important; */
  height: 100%;
  border-radius: 15px !important;
  background-color: rgba(40, 41, 45, 0.918) !important;
  border-color: rgb(180, 248, 200) !important;
  border-width: 2px !important;
}
.image-content,
.card-content{
  left: 25px;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  padding: 10px 14px;
}
.card-content a{
  text-decoration: none !important;
}
.image-content{
  position: relative;
  row-gap: 5px;
  text-align: left;
  padding: 25px 0;
}

.overlay::before,
.overlay::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: -40px;
  height: 40px;
  width: 40px;
  background-color: #041649;
}
.overlay::after{
  border-radius: 0 25px 0 0;
  background-color: #FFF;
}
.card-image{
  position: absolute;
  left: 28%;
  /* height: 30%; */
  width: 70px;
  border-radius: 50%;
  /* background: #FFF; */
  /* padding: 3px; */
}
.card-image .card-img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #B4F8C8 !important;
}
.name{
  
  font-size: 19px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  text-align: center !important;
}
.job-title{
  font-weight: 600;
  font-size: 16px;
  padding-top: 10px;
  text-decoration: none;
  color:#B4F8C8 !important;
  text-align: center !important;
}
.button{
  border: none;
  font-size: 16px;
  color: #FFF;
  padding: 8px 16px;
  background-color: #420037;
  border-radius: 6px;
  margin: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button:hover{
  background: #265DF2;
}
.swiper-navBtn-none{
  opacity: 0 !important;
}
.swiper-navBtn{
  color: rgb(4, 107, 35) !important;
  transition: color 0.3s ease;
}
.swiper-navBtn:hover{
  color: rgb(2, 48, 16) !important;
}
.swiper-navBtn::before,
.swiper-navBtn::after{
  font-size: 35px;
}
.swiper-button-next{
  right: 0;
}
.swiper-button-prev{
  left: 0;
}
.swiper-pagination-bullet{
  background-color: rgb(4, 107, 35);
  opacity: 1;
}
.swiper-pagination-bullet-active{
  background-color: rgb(2, 80, 25);
}
.swiper{
  margin-right: 0 !important;
  /* position: inherit !important; */
  top: -145px;
}

.items-center{
  align-items: center;
}
.fam{
  font-size: 55px;
  color:#B4F8C8;
  position: absolute;
  display: flex;
  top: 45%;
  left: 47%;
  /* color: #B4F8C8; */
  z-index: 0;
  transition: .5s;
}

.work-s:hover .fam{
  /* top: 45%; */
  /* left: 45%; */
  /* font-size: 65px; */
  color:#fff !important;
}
.work-s{
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  /* width:960px; */
}
.div-width{
  width: 960px !important;
}
.work-s img{
  
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  transition: transform 0.5s;
  scale: 1.1;
}

.work-s h3 {
  color: #fff;
  font-size: 25px;
}

.layer-s{
  width: 100%;
  height:100%;
  opacity: 0;
  /* background: linear-gradient(rgba(255, 255, 255, 0.2),#ffffffe7); */
  /* border-radius: 5px; */
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* padding:0 40px; */
  text-align: center;
  font-size: 14px;
  transition:   0.5s;
  /* scale: 1; */
}
.layer-s h3{
  font-weight: 500;
  /* margin-bottom: 20px; */

}
.layer-s a{
  /* margin-top: 20px; */
  /* color:#B4F8C8; */
  /* text-decoration: none; */
  /* font-size: 18px; */
  /* line-height: 60px; */
  /* background: #fff; */
  /* width: 60px; */
  /* height: 60px; */
  /* border-radius: 50%; */
  /* text-align: center; */
}
.work-s:hover img{
  transform: scale(1.1);
  /* -webkit-filter: blur(2px); Safari 6.0 - 9.0 */
  filter: blur(1.5px);
}

.work-s:hover .layer-s{
  /* transform:translateY(-10px); */
  /* height: 100%; */
  opacity: 1;
  /* left: auto; */
  /* right: auto; */
  /* width: 100%; */
}
/* p i{
  font-size: 55px;
  color:#ffffff;
  transition: .5s;
} */
  /* .fa-circle-play:hover {
  font-size: 55px !important;
  color:#912222 !important;
  /* z-index: 5 !important; 
} */

/* test lightbox */
#fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .70;
  filter: alpha(opacity=80);
  animation-name: fade;
  animation-duration: .5s;
}
@keyframes fade {
  from {opacity: 0;}
  to {opacity: .7;}
}
#light {
  display: none;
  text-align: center;
  position: absolute;
  top: 28%;
  left: 0;
  max-width: 600px;
  max-height: 360px;
  margin-left: 300px;
  margin-top: -180px;
  /* border: 2px solid #FFF; */
  /* background: #FFF; */
  z-index: 1002;
  overflow: visible;
  animation-name: light;
  animation-duration: .5s;
}
@keyframes light {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes light-out {
  0% {
    /* opacity: 1; */
    display: block;
    scale:1;
  }
  100% {
    /* opacity: 0; */
    scale: 0;
    display: none;}
}
#boxclose {
  cursor: pointer;
  display: flex;
  text-decoration: none;
  color: #fff;
  font-size: 30px;
  padding: 5px 15px;
  position: fixed;
  right: 3%;
  top: 3%;
  z-index: 1002;
  opacity: 0.9;
}

/* -------------- */
/* ---------------------------------------------------------------- */


/* contact */
#contact{
  /* margin-top: 10%; */
  max-width: max-content;
  margin: auto;
}
.padding-top-contact{
  padding-top: 6%;
  /* margin-top: 50%; */
}
.contact-form-margin{
  margin: -13%;
  padding-top: 15%;
}

.sub-title-contact{
  text-align: center;
  font-size: 60px;
  font-weight: 600;
  color: #fff;
}

.contact-left{
  flex-basis: 35%;

}
.contact-right{
  flex-basis: 60%;

}

.contact-left p{
  margin-top: 30px;
}

.contact-left p i{
  color:#B4F8C8;
  margin-right:15px;
  font-size: 25px;
}
.social-icons{
  /* margin-top: 30px; */
}
.contact-form{
  margin-left: 200px;
  margin-right: 200px;
}

.social-icons a{
  text-decoration: none;
  font-size: 30px;
  margin-right:15px;
  color:#ececec;
  display: inline-block;
  transition: transform 0.5s;
}

.social-icons a:hover{
  color:#B4F8C8;
  transform:translateY(-5px);
}
.btn.btn2{
  color: #1a6430;
  font-weight: 600;
  transition: .5s;
  display: inline-block;
  background: #B4F8C8;
}
.btn.btn2:hover{
  color: #fff;
  transform:translateY(-5px);
  background: #55ac6f;
}

.contact-right form{
  width: 100%;
}

form input, form textarea{
  width: 100%;
  border: 0;
  outline: none;
  background: #141414;
  padding: 15px;
  /* margin: 15px 0; */
  color: rgb(255, 255, 255);
  font-size: 18px;
  border-radius: 6px;
}

/* -------------------------------------------------------------------- */
.box 
{
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */

	position: relative; 
	width: 980px;
	height: 510px;
	background: #28292ddc;
	border-radius: 8px;
	overflow: hidden;
  border-style: solid;
  border-color: #55ac6f;
  border-width: 2px;
  transition: .5s;

}
.box:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  opacity: 1;

}
/* .box::before 
{
	content: '';
	z-index: 1;
	position: absolute;
	top: -50%;
	left: -50%;
	width: 980px;
	height: 500px;
	transform-origin: bottom right;
	background: linear-gradient(0deg,transparent,#55ac6f,#55ac6f);
	animation: animate 6s linear infinite;
}
.box::after 
{
	content: '';
	z-index: 1;
	position: absolute;
	top: -50%;
	left: -50%;
	width: 980px;
	height: 500px;
	transform-origin: bottom right;
	background: linear-gradient(0deg,transparent,#55ac6f,#55ac6f);
	animation: animate 6s linear infinite;
	animation-delay: -3s;
} */
@keyframes animate 
{
	0%
	{
		transform: rotate(0deg);
	}
	100%
	{
		transform: rotate(360deg);
	}
}
form 
{
	position: absolute;
	inset: 2px;
  /* background: linear-gradient(0,0,0,0.1),#0502025e; */
	background: #28292d23;
	padding: 0px 40px;
	border-radius: 8px;
	z-index: 2;
	display: flex;
	flex-direction: column;
}
h2 
{
	color: #45f3ff;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.1em;
}
.inputBox 
{
	position: relative;
	width: 900px;
	margin-top: 35px;
}
.inputBox input 
{
	position: relative;
	width: 100%;
	padding: 20px 10px 10px;
	background: transparent;
	outline: none;
	box-shadow: none;
	border: none;
	color: #23242a;
	font-size: 1em;
	letter-spacing: 0.05em;
	transition: 0.5s;
	z-index: 10;
}
.inputBox textarea 
{
	position: relative;
	width: 100%;
	padding: 20px 10px 10px;
	background: transparent;
	outline: none;
	box-shadow: none;
	border: none;
	color: #23242a;
	font-size: 1em;
	letter-spacing: 0.05em;
	transition: 0.5s;
	z-index: 10;
}
.inputBox span 
{
	position: absolute;
	left: 0;
	padding: 20px 0px 10px;
	pointer-events: none;
	font-size: 1em;
	color: #8f8f8f;
	letter-spacing: 0.05em;
	transition: 0.5s;
}
.inputBox input:valid ~ span,
.inputBox input:focus ~ span 
{
	color: #55ac6f;
	transform: translateX(0px) translateY(-34px);
	font-size: 0.75em;
}
.inputBox i 
{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #55ac6f;
	border-radius: 4px;
	overflow: hidden;
	transition: 0.5s;
	pointer-events: none;
	z-index: 9;
}
.inputBox input:valid ~ i,
.inputBox input:focus ~ i 
{
	height: 44px;
}
.inputBox textarea:valid ~ i,
.inputBox textarea:focus ~ i 
{
	height: 44px;
}
.links 
{
	display: flex;
	justify-content: space-between;
}
.links a 
{
	margin: 10px 0;
	font-size: 0.75em;
	color: #8f8f8f;
	text-decoration: beige;
}
.links a:hover, 
.links a:nth-child(2)
{
	color: #55ac6f;
}
input[type="submit"]
{
	border: none;
	outline: none;
	padding: 11px 25px;
	background: #55ac6f;
	cursor: pointer;
	border-radius: 4px;
	font-weight: 600;
	width: 100px;
	margin-top: 10px;
}
input[type="submit"]:active 
{
	opacity: 0.8;
}
.footer {
    position:fixed;
  left: 0;
  z-index: 50000;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
/* .margin-left-btn{
  margin-left:5px !important;
} */
/* ------------------------------------------------------ */
form .btn2{
  padding: 10px 30px;
  font-size: 18px;
  /* margin-top: 20px; */
  cursor: pointer;
}
.copyright{
    z-index: 5000;
    position: fixed;
    text-align: center;
    left: 50%;
    bottom: 0;
    padding-bottom: 15px;
    transform: translate(-50%, 0);

}

/* css for small screens */

nav .fas{
  display: none;
}

@media only screen and (max-width:768px) {
  .slide-content{
    margin: 0 10px;
  }
  .swiper-navBtn{
    display: none;
  }

  #header.home{
    /* background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),url("../assets/main/giphy-small.gif") !important; */
  }
  #header.about{
    /* background-image: linear-gradient(rgba(0, 0, 0, 01), rgba(0, 0, 0, 1)),url("../assets/main/giphy-small.gif") !important; */
  }
  #header.portfolio{
    /* background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),url("../assets/main/giphy-small.gif") !important; */
  }
  #header.contact{
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url("../assets/main/giphy-small.gif") !important; */
  }
  #header.about{
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url("../assets/main/giphy-small.gif") !important; */
  }

  .header-text{
    /* margin-top: 100%; */
    font-size: 16px;

  }
  .header-text h1{
    font-size: 30px;
  }
  nav .fas{
      padding-right: 10px;
    display: block;
    font-size: 25px;
  }
  ul{
    background: #B4F8C8;
  }
  nav ul{
    
    text-align: center;
    position: fixed;
    top: 0;
    right: -600px;
    width: 100%;
    height: 100vh;
    padding-top: 50px;
    z-index: 3;
    opacity: 0;
    transition: right 0.7s;
    font-size: 30px;
  }
  nav .port-filter {
    background: rgba(85, 172, 111, 0) !important;
    display: contents;
    text-align: center;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    padding-top: 50px;
    z-index: 3;
    opacity: 1 !important;
    transition: right 0.7s;
    font-size: 30px;
  }
  ol, ul{
    padding-left:1rem !important;
  }
  nav ul li{
    /* padding-top: 10px; */
    display: block;
    margin: 55px;
    font-size: 35px;
  }
   nav .port-filter-li{
    /* padding-top: 10px; */
    display: contents !important;
  }
  nav .port-filter-li a{
    /* padding-top: 10px; */
    display: contents !important;
    margin: 55px;
    font-size: 18px;
  }
  nav ul li a{
    /* padding-top: 100px; */
    font-size: 30px;
  }
  nav ul .fas{
    position: absolute;
    top: 25px;
    left: 25px;
    cursor: pointer;
  }
  .sidemenu{
    opacity: 0;
  }
  .copyright{
    position: relative;
    /* position: fixed; */
    text-align: center;
    left: 50%;
    bottom: 0;
    padding-top: 60px !important;
    padding-bottom: 0px !important;
    transform: translate(-50%, 0);
    font-size: 12px;
  }
  
  .container{
    /* padding: 40px 10%; */
    padding-bottom: 1px !important;
  }
  .close-btn{
    text-align: center;
  }

  .sub-title{
    text-align: center;
    font-size: 40px;
  }

  .about-col-1,.about-col-2{
    flex-basis: 100%;
  }
  .about-col-1 img{
    text-align: center;
    width:100%;
    flex: auto;
    
    /* padding:-20%; */
    flex-basis: 100%;
  }
  .about-col-1{
    margin-bottom: 30px;
  }
  .about-col-2 p{
    text-align: center;
    font-kerning: 100px;
    color: rgb(243, 243, 243);
    font-weight: 600;
    font-size: 15px;
  }
  .work{
    padding: 10px;
  }

  .contact-left, .contact-right{
    flex-basis: 100%;

  }

  .contact{
    text-align: center;
  }

  .box{
    width: 100%;
    height: 470px;
  }
  
  .inputBox 
{
	position: relative;
	width: auto;
	/* margin-top: 35px; */
}
.btn{
  /* position: relative; */
  /* text-align: center !important; */
  width: auto;
}
.form{
  display: none !important;
}
  .contact-form{
    margin-left: 20px;
    margin-right:20px;
  }
.singlebg-section{
  text-align: center;
}
.image-content{
  position: initial;
}
.card-image img{
  width: 70px !important;
}
.card-image{
  text-align: center;
  width: 100%;
  position: inherit;
  left: 0;
  
}
#iframe-id-video{
  width: 720px;
  height: 360px;
}
#light{
  margin: 0 ;
}
.project-title-padding-top{
  padding-top:10px !important;
}
}
@media only screen and (max-width:1550px) {
    .row-portfolio{
    
    flex-wrap: nowrap;
    }
   
  
}

@media only screen and (max-width:770px) {
  .row-portfolio{
    
    flex-wrap: wrap !important;
    }
.about-section{
    padding: 15px !important;
  }
  .cap-tcha{
    padding-top:45px !important;
}

ul{
    background: none !important;
  }
  .work-s{
      border: 2px solid #55ac6f;
  }

}
@media only screen and (max-width:820) {
  
.about-section{
    padding: 15px !important;
  }
}
@media (max-width: 767px) {
  /* Adjust the position of the Fancybox popup */
  .fancybox-container {
    left: 0 !important; /* Adjust as needed */
    right: 0 !important; /* Adjust as needed */
    top: 0 !important; /* Adjust as needed */
    bottom: 0 !important; /* Adjust as needed */
    transform: none !important;
  }

  /* Adjust the position of the Vimeo icon within the popup */
  .fancybox-vimeo {
    /* Adjust the positioning properties to place the icon correctly */
  }
  .fancybox-content{
      position:static !important;
  }
}

@media only screen and (max-width:1920px) {
  

  ul{
      background: rgb(85, 172, 111) !important;
    }
    .col-lg-6-width{
      width: 50% !important;
    }
  }

  @media only screen and (max-width:1200px) {
    
    #header{
      overflow-y: auto !important;
    }
    .work-s img{
      scale: 1 !important;
    }
    .fam{
      top: 38%;

      left:41%;

    }
    .project-title-padding-top{
      padding-top:0px;
    }

    .singlebg-section{
      font-size: 17px;
    }
    .image-content{
      padding:10px 0;
    }
    .work-s{

      padding-top: 10px;
    }
    .card-image{
      left: 20%;
    }
   
    .about-col-1{
      text-align: center;
    }
    .about-col-1 img{
      width: 200px !important;
    }
    .about-col-2 p {
      font-size: 18px;
      line-height:21px !important;
    }
    .row-padding{
      margin: 25px;
    }
  .logo{
    width: 70px;
  }
  iframe{
    width: 389px !important;
      /* height: 280px !important ; */
  }
  *{
    margin: 0px;
  }

  #contact{
    max-width: none;
  }
  .header-text{
    margin-top: 30%;
  }
  .header-text h1 {
    font-size: 40px;
  }
  .header-text p {
    font-size: 30px;
  }
  .container{
    padding: 0px 0%;
  }
  .box{
    left: 64px;
    width: 75%;
    height: 570px;
  }
  .home-btn a img{
    width: 250px !important;
  }
  .singlebg-section {
    font-size: 19px;
    }

    /* .project-desc,.slide-container{
      width: 351px;
    } */
    .showreel-mob{
      padding-top:25% !important;
    }
    .row-single{

      display:contents !important;
    justify-content:center !important;
    /* flex-wrap:nowrap !important; */
    }
  }  
  /* 300 */

  @media only screen and (min-width:300px) and (max-width:720px) {
    
   
  }
  @media only screen and (max-width:1200px) and(min-width:720px) {
    
    
  }
  @media only screen and (min-width:720px) {
    
   
  }
  @media only screen and (min-width:1550px) {
    
   
  }
  @media only screen and (min-width:768px) {
    
    ul{
        background: none !important;
      

    }
  }
    @media only screen and (min-width:1280px) {
    
  ul{
      background: none !important;
    }
    .col-lg-6-width{
      width: 49% !important;
    }
    
   
  }
  /* 4k Screens*/
  @media only screen and (min-width:2160px) { 

    .about-col-2{
      line-height: 40px;
    }
    .about-col-1 {
      padding-left: 45px;
    }
  
 
}
@media only screen and (min-width:1920px) { 

  .about-col-2{
    line-height: 40px;
  }
  .about-col-1 {
    padding-left: 45px;
  }


}
@media only screen and (max-height:800px) {
 .about-section{
    padding: 15px;
  }
  .copyright{
    position: relative;
    /* position: fixed; */
    text-align: center;
    left: 50%;
    bottom: 0;
    padding-top: 60px !important;
    padding-bottom: 0px !important;
    transform: translate(-50%, 0);
    font-size: 12px;
  }
@media screen and (min-width:0) and (max-width:1900px) {
	#porfolio {
  transform: scale(0.75);
}
}
 
  
}