/*=============================================================
    Authour URI: www.binarytheme.com
    License: Commons Attribution 3.0

    http://creativecommons.org/licenses/by/3.0/

    100% To use For Personal And Commercial Use.
    IN EXCHANGE JUST GIVE US CREDITS AND TELL YOUR FRIENDS ABOUT US

    ========================================================  */
/* ===========================================================
   GENERAL STYLES
   ============================================================*/
   html, body {
    overflow-x: hidden;
    margin: 0; /* Ensure there's no default margin that could cause overflow */
   }
    body::-webkit-scrollbar {
        display: none; /* Hides scrollbar in WebKit browsers */
    }
   body {
   font-family:'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #000;
    margin-top: 40px;
    line-height:16px;
}

h1, h2, h3, h4, h5, h6 {
      font-family:'Open Sans', sans-serif;
    font-weight: 500;
   line-height:40px;

}

h1 {
    color:#11B674;
    font-weight: 700;
}
.center {
    text-align: center;
}

.main-top-margin {
     margin-top: 75px;
}
.main-low-margin {
     margin-top: 55px;
}

a,a:hover {
    text-decoration:none;
}

p {
    line-height: 30px;
    margin-bottom: 23px;
}

.img-margin-product {
    margin-top:30px;
}
.bottam-pad {
     padding-bottom:40px;
}
.text-justify {
    text-align:justify;
}
/* ==========================================================================
   COLOR CODES
   ========================================================================== */

.color-red {
    color:#ff0000;
}

.color-green {
    color:#07BB00;
}

.color-light-blue {
    color:#BB00BB;
}

.color-blue {
    color:#0052FF;
}
.color-brown {
    color:#EB8F2D;
}
.color-black {
    color:#000000;
}

/* ==========================================================================
   HEADER SECTION
   ========================================================================== */

#header-section {
	background: url(../img/header.jpg) no-repeat center top;
	margin-top: -20px;
	padding-top:20px;
	text-align:center;
	background-position: center center;
	min-height: 700px;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#header-section h1 {
	margin-top: 120px;
	color: white;
	font-size: 65px;
	font-weight: 900;
	letter-spacing: 4px;
    line-height:70px;
}

#header-section h2 {
	color: white;
	font-size: 40px;
	font-weight: 900;
	letter-spacing: 4px;
}
.down-icon {
     color:white;
    font-weight:900;
}
/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */

#about-section {
    background-color: #FAFAFA;

}


/*==========================================
   SOCIAL ICON STYLES
    =====================================================*/

.color-facebook {
    color:#3B5998;
}
.color-twitter {
     color:#00aced;
}
.color-google-plus {
     color:#dd4b39;
}
.color-linkedin {
     color:#007bb6;
}
.color-pinterest {
     color:#cb2027;
}
/* ===========================================================
   BOOTSTRAP ELEMENTS CHANGES
   ============================================================*/
.navbar {
	font-size: 14px;
}

.navbar-inverse {
	background: #000000;
border-color: #5D5B66;
}

.navbar-inverse .navbar-nav > .active > a {
	background: #ffffff;
}

.navbar-inverse .navbar-brand {
	color: #ffffff;
	font-weight: bolder;
	font-size: 25px;
    font-weight:900;
	letter-spacing: 2px;
}
.navbar-inverse :hover .navbar-brand:hover {
	color: #ffffff;
}
.navbar-inverse .navbar-nav > li > a {
color: #FFFFFF;
}

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */

#contact-section {
    background-color: #FAFAFA;
}
/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */


#footer {
    background-color: #2F11C4;
    color: #fff;
    text-align: right;
    padding: 10px 30px 10px 30px;
}
 /* General container setup for the grid */
 /*.grid-container {*/
 /*   display: grid;*/
 /*   width: 1500px!important;*/
 /*   grid-template-columns: repeat(4, 1fr); */
 /*   grid-gap: 40px; */
 /*   padding: 20px;*/

 /* }*/

   
 /* .grid-item {*/
 /*   position: relative;*/
 /*   overflow: hidden;*/
 /*   border: 1px solid #ddd;*/
 /*   border-radius: 5px;*/
 /*   transition: transform 0.3s ease;*/
 /* }*/

 /* .grid-item img {*/
 /*   width: 100%;*/
 /*   height: 100%;*/
 /*   object-fit: cover;*/
 /* }*/
/* A responsive grid container */
 .grid-container {
    display: grid;
    width: 100%; 
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); 
    padding: 20px;
  }
 
  /* Style for each individual image box (Your code here is good!) */
  .grid-item {
      width: 360px;
      height: 320px;
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: transform 0.3s ease;
    
  }
 
  .grid-item img {
    /*width: 100%;*/
    height: 350px;
    object-fit: cover; /* Ensures the image covers the area of the box */
  }
  /* Responsiveness: make sure the grid is responsive on smaller screens */
  @media (max-width: 768px) {
    .grid-container {
      grid-template-columns: repeat(1, 1fr); /* 3 columns for smaller screens */
    }
  }

  @media (max-width: 480px) {
    .grid-container {
      grid-template-columns: repeat(1, 1fr); /* 2 columns for mobile screens */
    }
  }







  /* Responsive adjustments */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 2fr));
    gap: 15px;
  }

  .grid-item img {
    max-width: 400px;
    max-height: 200px;
  }
}
#header-section .text-right {
  text-align: right;
}
.text-center{
    text-align: center;

    color: #000;
}
.down-icon {
  margin-top: 200px;
  color: white;
  animation: bounce 2s infinite;
}

/* Bouncing animation for arrow */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* Responsive styles */
@media (max-width: 768px) {
  #header-section h1 {

    margin-top: -100px;
  }


  .down-icon{
    margin-top: 350px;
  }
}

/*Projects Grid */
.cert-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}

.cert-card {
    width: 1100px;
    border: 1px solid #ccc;
    border-radius: 1px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    text-align: center;
    transition: transform 0.3s ease;
    background-color: #fff;
    margin: 100px;

}

.cert-card img {
    width: 100%;
    height: auto;
    display: block;
}

.cert-card p {
    padding: 2px;
    font-size: 16px;
    font-weight: bold;
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.85);
    text-align: center;
}

/* Modal Image */
.modal-content {
    max-width: 80%;
    height: auto;
    border-radius: 2px;
}

/* Close Button */
.close {
    position: absolute;
    top: 50px;
    right: 50px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

/* Navigation Arrows */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    padding: 16px;
    margin-top: -22px;
    user-select: none;
    background-color: rgba(0,0,0,0.4);
    border-radius: 50%;
    transition: 0.3s;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.7);
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}
/* ---------- RESPONSIVE DESIGN ---------- */
@media (max-width: 768px) {
    .cert-card {
        flex: 1 1 90%;
        padding: 10px;
        width: 540px;
        margin: 2px;
    }

    .modal-content {
        max-width: 95%;
        max-height: 75%;
    }

    .close {
        top: 20px;
        right: 20px;
        font-size: 30px;
    }

    .prev, .next {
        font-size: 30px;
        padding: 12px;
    }
}