/* General classes start */
:root {
  --primary  : #3BB44A;
  --secondary: #B44A3B;
  --g-light  : #59c967;
  --g-dark   : #35a142;
  --g-dark   : #15411b;
  /* #59c967, #3bb44a, #35a142 */
}

*,
*::before,
*::after {
  padding           : 0;
  margin            : 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing   : border-box;
  box-sizing        : border-box;
  transition        : all 0.25s ease;
}

html,
body {
  scroll-behavior: smooth;
}

header,
main,
footer {
  position: relative;
  width   : 100%;
  overflow: hidden;
}

.h1,
h1 {
  font-size: calc(1.375rem + 2.5vw);
}

h4 {
  margin-bottom: 0 !important;
}

ul,
ol {
  padding: 0;
  margin : 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color          : var(--g-light);
}

a:hover {
  color: var(--primary);
}

img {
  height: auto;
  width : 100%;
}

/*  General classes end  */

/* Custom classes start */
.bg-green {
  background-color: var(--primary) !important;
}

.bg-dark-green {
  background-color: var(--g-dark) !important;
}

/* 
.btn-green {
  background-color: var(--primary) !important;
  color           : #000 !important;
  font-weight     : 400;
}

.btn-green:hover {
  background-color: var(--g-dark) !important;
} */

.border-green {
  border-color: var(--g-light) !important;
}

.text-green {
  color: var(--primary) !important;
}

.all-center,
.h-start,
.h-center,
.h-end,
.v-start,
.v-center,
.v-end {
  display: flex;
}

.all-center {
  justify-content: center;
  align-items    : center;
}

.h-start {
  justify-content: start;
}

.h-center {
  justify-content: center;
}

.h-end {
  justify-content: end;
}

.v-start {
  align-items: start;
}

.v-center {
  align-items: center;
}

.v-end {
  align-items: end;
}

section {
  padding-top   : 3rem;
  padding-bottom: 3rem;
}

.section-title {
  position      : relative;
  text-transform: uppercase;
  text-align    : center;
  color         : var(--primary);
  margin        : auto;
  margin-bottom : 2rem;
  /* overflow   : hidden; */
  padding       : 20px 0;
  width         : fit-content;
  border-bottom : 2px dashed var(--primary);
  border-top    : 2px dashed var(--primary);
}

.section-title h4 {

  color      : #000;
  font-weight: bolder;
  font-size  : 2rem !important;
}

.section-title ::before,
.section-title ::after {
  content         : "";
  position        : absolute;
  top             : 50%;
  width           : 100%;
  height          : 2px;
  background-color: var(--primary);

}

.section-title ::before {

  left: -120%;

}

.section-title ::after {

  right: -120%;

}

.section-content {
  /* min-height      : 500px; */
  /* border          : 5px solid #000; */
  /* background-color: #eefff0; */
  text-align: center;
}

/* Custom classes end */

/* Header style start */
.homeHeader {
  background: url(../img/home-001.webp);
}

.fenceHeader {
  background: rgb(233, 233, 255);
  background: url(../img/fence-007.webp);
}

.landscapeHeader {
  background: rgb(255, 233, 233);
  background: url(../img/interlock-007.webp);
}

.homeHeader,
.fenceHeader,
.landscapeHeader {
  position           : relative;
  height             : calc(100vh - 150px);
  background-position: center;
  background-size    : cover;
  background-repeat  : no-repeat;
  text-align         : center;
  overflow           : visible;
  transition         : all 0.5s ease-in-out;
}



.logo-contact-bar {
  position      : relative;
  box-shadow    : 0 5px 5px 0px #33333333;
  padding-bottom: 10px;
  z-index       : 997;
}

.logo-link {
  display: inline-block;
  width  : 220px;
}

.contact-item:hover {
  color: var(--primary) !important;
}

.header-nav {
  position  : relative;
  top       : -10px;
  height    : 60px;
  z-index   : 998;
  border    : 1px solid var(--primary);
  box-shadow: 0 0px 5px 1px #33333333;
  box-shadow: 0 -3px 5px 0px #333333,
    0 0px 5px 1px #333333;
  margin: auto;
}

/*.carousel {
  overflow   : hidden;
  position   : absolute;
  height     : 100%;
  top        : 0;
  left       : 0;
  /* top     : -200px; 
  /* top     :0; 
  right      : 0;
  bottom     : 0; 
}*/
.carousel {
  position: relative;
  top     : -60px;
}

.header-nav a {
  font-size  : 1.25rem;
  font-weight: bold;
  color      : #000;
}

.header-nav a:hover {
  color: #fff;
}

.active {
  color        : white !important;
  border-bottom: 4px solid var(--g-dark);
}

.summary {
  width : 100%;
  height: 100%;
}

.summary-content {
  position        : absolute;
  left            : 0;
  right           : 0;
  bottom          : 100px;
  background-color: rgba(0, 0, 0, 0.2);
  padding         : 1rem;
  border-radius   : 3px;
  color           : white;
  box-shadow      : 0 0 5px 2px #000;

}

.summary-text {
  font-size  : 1.5rem;
  color      : #fff;
  font-weight: 500;
}

/* Header style end */

/* Main style start */
/* About section start */

.about-us {
  background-color: whitesmoke;
}


.about-img-box {
  position: relative;
  height  : 600px;

}

.about-img-items {
  position       : relative;
  height         : 100%;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.about-img-item {
  position: absolute;
  overflow: hidden;
  width   : 50%;
  height  : 50%;
}

.about-img-item img {
  border: 1px solid #00000055;
  height: 100%;
}

.about-img1 {
  /* background-color: red; */
  top : 25px;
  left: 25px;
}

.about-img2 {
  /* background-color: green; */
  top  : 0px;
  right: 0px
}

.about-img3 {
  /* background-color: blue; */
  bottom: 25px;
  right : 25px
}

.about-img4 {
  /* background-color: yellow; */
  bottom: 0px;
  left  : 0px;
}

/* About section end */

/* Services section start */
.service-content {
  position     : relative;
  margin-bottom: 1rem;
}

.service-title {
  position        : relative;
  width           : 50%;
  left            : 25%;
  top             : -20px;
  color           : black;
  color           : #fff;
  padding         : 0.75rem 0;
  border-radius   : 4px;
  background-color: var(--primary);
  outline         : 3px solid white;
  box-shadow      : 0 0 10px 2px #222;
}

.service-title h5 {
  margin     : 0;
  font-weight: 500;
}

/* Services section end */

/* Why choose us section start */
.choose-us {
  background-color: whitesmoke
}



.choose-us-content {
  position        : relative;
  height          : 120px;
  background-color: white;
  color           : var(--primary);
  box-shadow      : 0 0 5px 0px #00000050;
  border-radius   : 4px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  margin          : 2rem 0;


}

.choose-icon {
  position        : absolute;
  height          : 70px;
  width           : 70px;
  top             : -35px;
  z-index         : 20;
  left            : calc(50% - 35px);
  border-radius   : 50%;
  border          : 3px solid white;
  background-color: var(--primary);
  box-shadow      : 0 0 5px 2px #00000050;

}

.choose-icon span {
  font-size: 2.5rem
}

.choose-text p {
  text-align   : center;
  font-size    : 1.5rem;
  margin       : 0;
  margin-top   : 60px;
  margin-bottom: 20px;
  font-weight  : 500;
}

/* Why choose us section end */

/* Contact us section start */
form {
  border : 1px solid var(--g-light);
  padding: 50px 100px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display      : block;
  margin-bottom: 5px;
  text-align   : left;
}

input[type="text"],
input[type="email"],
textarea {
  width        : 100%;
  padding      : 10px;
  border       : 1px solid #ccc;
  border-radius: 4px;
}

.error-message {
  color     : red;
  font-size : 14px;
  margin-top: 5px;
}

.green-btn {
  background-color: var(--primary);
  color           : #fff;
  padding         : 10px 20px;
  border          : none;
  border-radius   : 4px;
  cursor          : pointer;
  font-size       : 1.25rem;
}

.green-btn:hover {
  background-color: var(--g-dark);
}

/* Contact us section end */


/* Footer section start */

footer li,
footer li a {
  color: #ddd
}

.footer-social-link {
  width: fit-content;
}

.facebook,
.instagram {
  display         : inline-flex;
  justify-content : center;
  align-items     : center;
  width           : 32px;
  height          : 32px;
  padding         : .3rem;
  font-size       : 1.5rem;
  color           : white;
  background-color: #ddd;
  border-radius   : 3px;
  transition      : all 0s ease !important;

}

.facebook {

  color: blue;
}

.facebook:hover {
  color           : blue;
  background-color: #fff;
}

.instagram {
  color: rgb(153, 2, 145);
}

.instagram:hover {
  color           : rgb(153, 2, 145);
  background-color: #fff;
}

/* Footer section end */


/* Main style end */

/* To up section start */
.to-up-section {
  position     : fixed;
  z-index      : 999;
  bottom       : -75px;
  right        : 15px;
  width        : 40px;
  height       : 45px;
  overflow     : hidden;
  border       : 2px solid #fff;
  border-radius: 3px;
  box-shadow   : 0 0 5px 1px #111;
}

.to-up-content {
  width           : 100%;
  height          : 100%;
  background-color: var(--primary);
  display         : flex;
  justify-content : center;
  align-items     : center;
  /* border-radius:50%; */
  /* border       : 3px solid #000; */
  cursor          : pointer;
}


.to-up-content:hover {

  background-color: var(--g-dark);
}

.to-up-content i {
  color    : #fff;
  font-size: 1.25rem;
}

/* To up section end */

/* ========================= Fence Page Style Start ========================= */
.toNext {
  position: absolute;
  bottom  : 35px;
  left    : 0;
  right   : 0;
}

.type-fence {
  background: whitesmoke;
}

.type-fence-item,
.PVC-fence-item {
  position  : relative;
  overflow  : hidden;
  margin    : 1rem;
  cursor    : pointer;
  box-shadow: 0 0 4px 0px var(--g-light);
  box-shadow: 0 0 4px 2px #22222233;
  transform : scale(1.025)
}

.type-fence-item:hover {
  box-shadow: none;
  transform : scale(1)
}

.type-fence-item:hover .type-fence-title {
  /* top: calc(50% - 1.5rem); */
  top: 75%;
}

.type-fence-title {
  background-color: var(--primary);
  display         : flex;
  align-items     : center;
  justify-content : center;
  height          : 3rem;
  position        : absolute;
  box-shadow      : 0 0 8px 1px #222;
  left            : 0;
  right           : 0;
  top             : -70px;
  /* opacity      :0.8; */
}

.type-fence-title h5 {
  margin     : 0 !important;
  color      : #fff;
  font-weight: 700;
}

.pvc-features-item {
  list-style-type: disc;
  padding        : 0.3rem 0;
  font-size      : 1.25rem;
}

.PVC-fence-item:hover img {
  transform: scale(2)
}

/* ========================= Fence Page Style End ========================= */



/* ========================= Media Style Start ========================= */

/* شاشات الهواتف المحمولة الصغيرة */
@media screen and (max-width: 320.98px) {

  html,
  body {
    font-size: 14px;
  }

  .header-nav {
    max-width: 90%;
  }

}

/* شاشات الهواتف المحمولة المتوسطة */
@media screen and (min-width: 321px) and (max-width: 479.98px) {
  .logo {
    font-size: 2.5rem;
  }

  .header-nav {
    max-width: 90%;
  }

}

/* شاشات الهواتف المحمولة المتوسطة */
@media screen and (max-width: 479.98px) {

  .homeHeader,
  .fenceHeader,
  .landscapeHeader {

    height: calc(100vh - 270px);
  }

  .toNext {
    bottom: 60px;
  }

  .about-img-box {
    height: 400px;

  }

  .logo-bar {
    padding-bottom: 0.5rem !important;
  }


  .contact-bar {
    padding-top   : 0rem !important;
    padding-bottom: 0.5rem !important;
  }

  .summary-content {
    bottom      : 50px;
    /* font-size: 0.1rem; */
    padding     : 0.5rem;

  }

  .summary-text {
    font-size: 1rem;

  }

  form {
    padding: 50px 20px;
  }

  .header-nav a {
    font-size: 1.1rem;
  }
}


/* شاشات الأجهزة اللوحية في الوضع الرأسي */
@media screen and (min-width: 480px) and (max-width: 767.98px) {

  .homeHeader,
  .fenceHeader,
  .landscapeHeader {

    height: calc(100vh - 215px);
  }

  .header-nav a {
    font-size: 1.1rem;
  }

  .header-nav {
    max-width: 80%;
  }


  .about-img-box {
    height: 500px;

  }

  form {
    padding: 50px 20px;
  }

}

/* شاشات الأجهزة اللوحية في الوضع الأفقي وشاشات الكمبيوتر المحمولة الصغيرة */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  form {
    padding: 50px 20px;
  }

  .header-nav {
    max-width: 80%;
  }
}

/* شاشات الكمبيوتر المحمولة الكبيرة وشاشات سطح المكتب */
@media screen and (min-width: 1024px) {
  .header-nav {
    max-width: 50%;
  }

  .about-img-col {
    padding-top: 100px;
  }
}



/* ========================= Media Style End ========================= */

/* ========================= Works Gallery Page Style Start ========================= */
.gallery {
  text-align: center;
}

.tabs {
  margin-top: 20px;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  margin: 2px 0;
  border: 1px solid var(--g-dark);
  background-color: #f2f2f2;
  transition: background-color 0.25s;
  -webkit-transition: background-color 0.25s;
  -moz-transition: background-color 0.25s;
  -ms-transition: background-color 0.25s;
  -o-transition: background-color 0.25s;
}

.tab.active {
  background-color: var(--primary);  
  color        : white !important;
  border-bottom: 4px solid var(--g-dark);
}

.tab:hover:not(.tab.active) {
  background-color: #ddd;
  border-bottom: 2px solid var(--g-dark);
}
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin: 20px;
}

.image {
  width: 100%;
  height: auto;
  cursor: pointer;
}
.image:hover{
  transform: scale(1.1);
  /* border: 2px solid red; */
  border-radius:5px;
  /* box-shadow: 0 0 100px 100px #000000; */
}

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.lightbox-content {
  max-width: 80%;
  max-height: 80%;
}

.close-btn {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 10%;
  right: 10%;
  font-size: 40px;
  color: white;
  padding: 0 10px;
  border: 2px solid red !important;
  border-radius: 3px;
  cursor: pointer;
  user-select:none;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.close-btn:hover{
  color: red;
  border: 2px solid white !important;
}


/* ========================= Works Gallery Page Style End ========================= */