/*

TemplateMo 576 SnapX Photography

https://templatemo.com/tm-576-snapx-photography

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  color: #2a2a2a;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 20px;
  line-height: 28px;
  color: #7a7a7a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Roboto', sans-serif;
}

::selection {
  background: #00bdfe;
  color: #fff;
}

::-moz-selection {
  background: #00bdfe;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.border-button a {
  font-size: 15px;
  color: #00bdfe;
  background-color: transparent;
  border: 1px solid #00bdfe;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.border-button a:hover {
  background-color: #00bdfe;
  color: #fff;
}

.main-button a {
  font-size: 15px;
  color: #fff;
  background-color: #00bdfe;
  border: 1px solid #00bdfe;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: transparent;
  color: #00bdfe;
}

section {
  /* margin-top: 120px; */
}

.section-heading {
  position: relative;
  z-index: 2;
  margin-top: 0px;
  margin-bottom: 70px;
}

.section-heading h3 {
  /* font-size: 15px; */
  /* text-transform: uppercase; */
  /* color: #00bdfe; */
  font-weight: 500;
  margin-top: 80px;
}

.section-heading h4 {
  margin-top: 10px;
  line-height: 36px;
  font-size: 30px;
  font-weight: 700;
  text-transform: capitalize;
  color: #212741;
}

.section-heading h4 em {
  color: #00bdfe;
  font-style: normal;
}

.section-heading p {
  margin-top: 30px;
}




/* =========================
   🔹 TOP BAR
========================= */
.topbar {
  background: #00c2ff;
  color: #000;
  padding: 10px 5%;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 30px;
  position: sticky;
  top: 0;
  z-index: 1200;
}

/* Left: Email & Phone */
.topbar .left {
  display: flex;
  gap: 28px;
  align-items: center;
}
.topbar .left a {
  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  white-space: nowrap;
}
.topbar .left a i {
  font-size: 15px;
  width: 18px;
  text-align: center;
}

/* Right: Time + Social */
.topbar .right {
  display: flex;
  gap: 25px;
  align-items: center;
}
.topbar .right span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.topbar .right span i {
  font-size: 15px;
}

/* SOCIAL ICONS */
.topbar .social {
  display: flex;
  gap: 22px;
  align-items: center;
}
.topbar .social a {
  color: #000;
  font-size: 18px;
  transition: transform 0.3s;
}
.topbar .social a:hover {
  transform: scale(1.3);
}

/* =========================
   🔹 FINAL MOBILE TOPBAR FIX
========================= */
@media (max-width: 768px) {
  .topbar .left {
    display: none !important;
  }
  .topbar .right {
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row !important;
    gap: 15px;
    width: 100%;
    padding: 6px 10px;
  }
  .topbar .right span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #000;
    font-weight: 500;
    white-space: nowrap;
  }
  .topbar .social {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .topbar .social a {
    color: #000;
    font-size: 17px;
    transition: transform 0.3s;
  }
  .topbar .social a:hover {
    transform: scale(1.2);
  }
}

/* =========================
   🔹 RESPONSIVE DESIGN
========================= */

/* Tablet ≤992px */
@media (max-width: 992px) {
  .topbar {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 15px;
    padding: 8px 3%;
  }
  .topbar .left,
  .topbar .right {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .topbar .social {
    gap: 16px;
  }
}

/* Mobile ≤768px */
@media (max-width: 768px) {
  .topbar {
    font-size: 12px;
    padding: 6px 2%;
    gap: 8px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1400;
  }
  .topbar .left a,
  .topbar .right span {
    font-size: 12px;
  }
  .topbar .social a {
    font-size: 16px;
  }
}

/* Extra Small ≤576px */
@media (max-width: 576px) {
  .topbar {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
  .topbar .left,
  .topbar .right {
    flex-direction: column;
    gap: 80px;
  }
}




/* =========================
       HEADER (Logo + Menu)
========================= */
.header {
  background: #fff;
  padding: 8px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  /* position: relative; */
  position: sticky;
top: 40px; /* EXACT position under the topbar */
  z-index: 1100;
}

.logo img {
  height: 100px;
  width: 160px;
  object-fit: contain;
}

/* =========================
       NAVIGATION
========================= */
.nav ul {
  display: flex;
  gap: 38px;
  list-style: none;
}

.nav a, 
.nav .dropbtn {
  color: #000;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
  position: relative;
  transition: color 0.3s;
}

.nav a:hover,
.nav a.active,
.nav .dropbtn:hover,
.nav .dropbtn[aria-expanded="true"] {
  color: #00c2ff;
}

.nav a.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 3px;
}

.arrow {
  margin-left: 6px;
  font-size: 10px;
  transition: transform 0.3s;
}

/* =========================
       DROPDOWN (Desktop)
========================= */
.dropdown {
  position: relative;
}

.dropdown-content {
  position: absolute;
  background: #fff;
  min-width: 250px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border-radius: 8px;
  top: 100%;
  left: 140%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
  margin-top: 8px;
  padding: 0;
  overflow: visible !important;
}

.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  top: calc(100% + 4px);
}

.dropdown:hover .arrow {
  transform: rotate(180deg);
  color: #00c2ff;
}

.dropdown-content a {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  /* border-bottom: 1px solid #eee; */
  transition: 0.3s;
}

.dropdown-content a:hover {
  background: #00c2ff;
  color: #fff;
  padding-left: 20px;
}

.dropdown-content a:last-child {
  border: none;
}

/* =========================
   SUB-DROPDOWN (Nested)
========================= */
.sub-dropdown {
  position: relative;
}

.sub-dropdown-content {
  position: absolute !important;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 100px;
  margin-top: 5px;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.sub-dropdown:hover > .sub-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sub-dropdown-content a {
  display: block;
  padding: 8px 24px;
  font-size: 13.5px;
  color: #333;
  background: #fff;
  border-bottom: 1px solid #eee;
  text-decoration: none;
}

.sub-dropdown-content a:hover {
  background: #00c2ff;
  color: #fff;
}

/* =========================
   CLICK-BASED SUBMENU
========================= */
.sub-toggle {
  display: none;
}

.sub-dropdown > label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  cursor: pointer;
  background: #fff;
  color: #333;
  border-bottom: 1px solid #eee;
  font-weight: 500;
  transition: background 0.3s, color 0.3s;
}

.sub-dropdown > label:hover {
  background: #00c2ff;
  color: #fff;
}

.sub-dropdown > label i {
  font-size: 10px;
  transition: transform 0.3s;
}

.sub-toggle:checked + label i {
  transform: rotate(90deg);
}

.sub-toggle:checked ~ .sub-dropdown-content {
  display: block;
  opacity: 1;
  visibility: visible;
}

.sub-dropdown-content {
  display: none;
  position: static !important;
  background: #f8f9fa;
  box-shadow: none;
  transform: none;
  margin: 0;
  padding: 0;
  opacity: 1;
  visibility: visible;
  margin-left: 40px;
}

/* =========================
   HAMBURGER & MOBILE MENU
========================= */
#menu-toggle, #dropdown-toggle {
  display: none;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 28px;
  height: 22px;
  justify-content: space-between;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1100;
}

.menu-toggle span {
  background: #000;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  transition: 0.3s;
}

/* =========================
   RESPONSIVE: MOBILE
========================= */
@media (max-width: 768px) {
  .menu-toggle { display: flex; }
  .header {
     position: fixed;
    top: 36px; /* height of mobile topbar */
    width: 100%;
    z-index: 1300;
  }
  body {
    padding-top: 100px !important; /* increase padding so banner becomes fully visible */
  }
  .nav ul {
    display: none;
    flex-direction: column;
    background: #fff;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 999;
  }

  #menu-toggle:checked ~ .nav ul { display: flex; }

  .nav ul li {
    width: 100%;
  }

  .nav ul li a,
  .nav ul li .dropbtn {
    padding: 10px 0;
    justify-content: center;
    font-size: 14.5px;
  }
.dropdown{
  margin-left: 4px;
}
  .dropdown-content {
    position: static;
    background: #f8f9fa;
    box-shadow: none;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    /* margin-left: 180px; */
    margin: 0;
    left: 0; 
    transform: none;
    padding: 0;
  }

  #dropdown-toggle:checked ~ .dropdown-content {
    opacity: 1;
    visibility: visible;
    max-height: 500px;
  }

  .dropbtn .arrow {
    font-size: 10px;
    transition: transform 0.3s;
  }

  #dropdown-toggle:checked + label.dropbtn .arrow {
    transform: rotate(180deg);
  }

  .sub-dropdown-content {
    display: none;
    background: #fff;
    box-shadow: none;
    border: none;
    opacity: 1;
    /* Override desktop absolute positioning */
    position: static !important;
    /* font-size: 7px; */
    /* Ensure it takes up the full width of its parent */
    width: 100%; 
    
    /* Remove any strange desktop offsets */
    left: auto;
    transform: none; 
    
    /* Ensure the padding/margin is appropriate for nesting */
    margin-left: 0;
    visibility: visible;
  }

  .sub-toggle:checked ~ .sub-dropdown-content {
    display: block;
  }
.sub-dropdown a{
  font-size: 14.5px !important;
}
  .sub-dropdown-content a {
    padding: 12px 30px;
    text-align: center;
    font-size: 13px !important;
  }
  .sub-dropdown > label {
    /* Overrides the desktop default of 'space-between' in your CSS */
    justify-content: center; 
    
    /* Reduce padding to make the entire item look more compact */
    padding: 10px 20px;
    
    /* Ensure link element is centered */
    text-align: center;
  }
  
  .sub-dropdown > label a {
    /* Clear out horizontal margins/auto-spacing */
    margin-right: 5px; 
    text-align: center;
  }
}
@media (max-width: 768px) {
  /* ... */
.dropdown-content {
    position: static;
    /* OVERRIDE: Remove the problematic margin-left that causes offsets */
    margin: 0; 
    left: auto;
    transform: none;
    width: 100%;

    /* ENSURE COLLAPSE MECHANISM IS STRICT */
    opacity: 0 !important; /* Force opacity to 0 when unchecked */
    visibility: hidden !important; /* Force visibility to hidden when unchecked */
    max-height: 0;
    overflow: hidden;
  }
  
  /* 2. CRITICAL FIX for the open dropdown content */
  #dropdown-toggle:checked ~ .dropdown-content {
    opacity: 1 !important; /* Force visibility when checked */
    visibility: visible !important; /* Force visibility when checked */
    max-height: 500px;
  }
  .sub-dropdown-content {
    /* Override global/desktop rules */
    position: static !important; 
    
    /* Ensure it respects the display toggle */
    display: none; 
    width: 100%;
    /* Ensure no residual visibility settings */
    opacity: 1; /* Resetting this to 1 is fine since max-height:0 will hide it */
    visibility: visible;
    
    /* FIX: Remove horizontal offsets which might push it outside the overflow area */
    margin: 0;
    left: auto;
    transform: none;
  }

  .sub-toggle:checked ~ .sub-dropdown-content {
    display: block;
  }
  .sub-dropdown > label {
    justify-content: center; 
    padding: 10px 20px; /* Adjust padding to center better */
  }
  
  .sub-dropdown > label a {
    margin-right: 5px; /* Space between text and arrow */
    text-align: center;
  }
}

/* =========================
   RESPONSIVE TWEAKS
========================= */
@media (max-width: 992px) {
  .header { padding: 10px 3%; }
  .logo img { height: 90px; width: 150px;object-fit: contain;}
  .nav ul { gap: 2px; }
  .nav a, .nav .dropbtn { font-size: 15px; }
}
@media (max-width: 768px) {
  .logo img {
    height: 80px;
    width: 145px;
    object-fit: contain;
  }
}
@media (max-width: 576px) {
  .header { padding: 6px 2%; }
  .logo img { height: 75px; width: 140px;
  margin-top: 8px; object-fit: contain;}
  .nav a, .nav .dropbtn { font-size: 13px; }
}

@media (max-width: 400px) {
  .logo img {
    height: 68px;
    width: 130px;
    object-fit: contain;
  }
}
@media (max-width: 330px) {
  .logo img {
    height: 60px;
    width: 115px;
    object-fit: contain;
  }
}






/* ===============================
   🏠 HOME SECTION (BASE STYLES)
================================= */
.home-section {
  /* margin-top: 80px; */
  padding: 40px 5%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-container {
  max-width: 1100px;
  color: #222;
}

/* ------------------------------
   🧭 HEADING STYLES
------------------------------ */
.home-container h1 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 30px;
}

.home-container h1 span {
  color: #0078d4; /* Blue highlight */
}

/* ------------------------------
   📝 PARAGRAPH STYLES
------------------------------ */
.home-container .intro {
  font-size: 20px;
  color: #444;
  line-height: 1.8;
  text-align: justify;
  padding: 0 20px;
}

/* ------------------------------
   🧾 ADDITIONAL DETAILS TEXT
------------------------------ */
.home-container .details {
  font-size: 18px;
  line-height: 1.8;
  color: #444;
  margin-top: 25px;
}

/* ===============================
   📱 TABLET VIEW (≤992px)
================================= */
@media (max-width: 992px) {
  .home-section {
    padding: 60px 6%;
  }

  .home-container h1 {
    font-size: 34px;
  }

  .home-container .intro {
    font-size: 18px;
    padding: 0 15px;
  }
}

/* ===============================
   📲 MOBILE VIEW (≤768px)
================================= */
@media (max-width: 768px) {
  .home-section {
    padding: 50px 8%;
  }

  .home-container h1 {
    font-size: 28px;
    text-align: center;
    line-height: 1.5;
  }

  .home-container .intro {
    font-size: 17px;
    text-align: left;
    line-height: 1.7;
  }
}

/* ===============================
   📞 SMALL MOBILE (≤480px)
================================= */
@media (max-width: 480px) {
  .home-section {
    padding: 40px 10%;
  }

  .home-container h1 {
    font-size: 24px;
  }

  .home-container .intro {
    font-size: 16px;
    line-height: 1.6;
  }
}




.services-section {
  padding: 80px 60px;
  background-color: #fff;
}

.centered-div {
  background-color: #ffffff;
  max-width: 1000px;
  margin: 50px auto 50px auto; 
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* Row Layout */
.services-section .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

/* Individual Service Card */
.service-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: calc(33.333% - 20px); /* 3 cards per row on desktop */
  text-align: center;
}

.service-card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.service-content {
  padding: 20px;
}

.service-content h4 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* Hover Effects */
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Tablet View */
@media (max-width: 992px) {
  .service-card {
    width: calc(50% - 15px); /* 2 cards per row */
  }

  .services-section {
    padding: 60px 30px;
  }

  .service-content h4 {
    font-size: 18px;
  }
}

/* Mobile View */
@media (max-width: 576px) {
  .service-card {
    width: 100%; /* 1 card per row */
  }

  .services-section {
    padding: 40px 20px;
  }

  .service-content h4 {
    font-size: 16px;
  }
}






/* Responsive CSS */

/* Tablets (max-width: 991px) */
@media (max-width: 991px) {
  .header-area {
    height: 80px;
    top: auto;
  }

  .header-area .main-nav .logo img {
    height: 80px;
    width: auto;
    margin-left: 0;
  }

  .header-area .main-nav .nav li a {
    font-size: 16px;
    line-height: 80px;
  }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  .header-area {
    height: 100px;
    position: relative;
    top: 5px;
  }

  .header-area .main-nav {
    flex-direction: row;
    justify-content: space-between;
  }

  .header-area .main-nav .logo {
    position: relative;
    top: 10px;
    left: 0;
  }

  .header-area .main-nav .logo img {
    height: 90px;
    width: auto;
  }

  .header-area .main-nav .menu-trigger {
    display: block;
    top: 40px;
  }

  .header-area .main-nav .nav {
    display: none;
    flex-direction: column;
    background: #fff;
    position: absolute;
    width: 100%;
    top: 0;       
    left: 0;
    margin-top: 100px;
  }

  .header-area .main-nav .nav li {
    /* margin-left: 0; */
    width: 100%;
    text-align: left;
  }

  .header-area .main-nav .nav li a {
     display: block;
    font-size: 13px;
    line-height: normal;  
    padding: 12px 15px;  
    background: transparent;
    color: #191a20;
    transition: all 0.3s ease;
  }

  .header-area .main-nav .nav li a:hover {
    background: #eee;
     color: #00bdfe;
  }

  /* Show nav when menu-trigger is active */
  .header-area .main-nav .nav.active {
    display: flex;
    max-height: 500px;
  }
  .header-area .main-nav .nav li:first-child a {
    padding-top: 12px !important;
    line-height: normal !important;
  }
}
/* Hide top bar on mobile & tablet */
@media (max-width: 991px) {
  .top-bar {
    display: none !important;
  }
}

/*
--------------------------------------------
PopUp Style
--------------------------------------------
*/

#lean_overlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  display: none;
}

section.popupBody {
  margin-top: 0px;
}

.popupContainer {
  position: absolute;
  width: 330px;
  height: auto;
  left: 45%;
  top: 60px;
  background: #FFF;
}

.btn {
  padding: 10px 20px;
  background: #00bdfe;
  color: #fff;
  transition: all .3s;
}

.btn_red {
  background: #00bdfe;
  color: #FFF;
}

.btn:hover {
  background: #E4E4E2;
}

.btn_red:hover {
  color: #2a2a2a;
  background: #E4E4E2;
}

a.btn {
  color: #fff;
  text-align: center;
  text-decoration: none;
}

a.btn_red {
  color: #FFF;
}

.one_half {
  width: 50%;
  display: block;
  float: left;
}

.one_half.last {
  width: 45%;
  margin-left: 5%;
}

.popupHeader {
  font-size: 16px;
  text-transform: uppercase;
}

.popupHeader {
  background: #F4F4F2;
  position: relative;
  padding: 10px 20px;
  border-bottom: 1px solid #DDD;
  font-weight: bold;
}

.popupHeader .modal_close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 15px;
  background: #00bdfe;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
}

.popupBody {
  padding: 20px;
}

.social_login .social_box {
  display: block;
  clear: both;
  padding: 10px;
  margin-bottom: 10px;
  background: #F4F4F2;
  overflow: hidden;
}

.social_login .icon {
  display: inline-block;
  
  padding: 5px 10px;
  margin-right: 10px;
  float: left;
  color: #FFF;
  font-size: 16px;
  text-align: center;
}

.social_login .fb .icon {
  background: #3B5998;
}

.social_login .google .icon {
  background: #DD4B39;
}

.social_login .icon_title {
  display: block;
  padding: 5px 0;
  float: left;
  font-weight: bold;
  font-size: 16px;
  color: #777;
}

.social_login .social_box:hover {
  background: #E4E4E2;
}

.centeredText {
  color: #afafaf;
  text-align: center;
  margin: 20px 0;
  clear: both;
  overflow: hidden;
  text-transform: capitalize;
}

.user_login label {
  color: #afafaf;
}

.action_btns {
  clear: both;
  overflow: hidden;
}

.action_btns a {
  display: block;
}
/* User Login Form */

.user_login {
  display: none;
}

.user_login label {
  display: block;
  margin-bottom: 5px;
}

.user_login input[type="text"],
.user_login input[type="email"],
.user_login input[type="password"] {
  display: block;
  width: 90%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_login input[type="checkbox"] {
  float: left;
  margin-right: 10px;
  width: 22px;
  height: 22px;
}

.user_login input[type="checkbox"]+label {
  float: left;
}

.user_login .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}

.forgot_password {
  display: block;
  margin: 20px 0 10px;
  clear: both;
  overflow: hidden;
  text-decoration: none;
  color: #00bdfe;
  transition: all .3s;
}
/* User Register Form */

.user_register {
  display: none;
}

.user_register label {
  color: #afafaf;
  display: block;
  margin-bottom: 5px;
}

.user_register input[type="text"],
.user_register input[type="email"],
.user_register input[type="password"] {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_register input[type="checkbox"] {
  width: 22px;
  height: 22px;
  float: left;
  margin-right: 8px;
}

.user_register input[type="checkbox"]+label {
  float: left;
  color: #afafaf;
}

.user_register .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}


/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/
/* ===============================
   🌐 MAIN BANNER SECTION
================================= */
.main-banner {
  width: 100%;
  height: 80vh;
  background-image: url('../images/homepage-banner.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* text on right */
  padding-right: 6%;
  box-sizing: border-box;
}

/* ===============================
   📝 HEADER TEXT (Desktop Base)
================================= */
.header-text {
  color: #fff;
  max-width: 550px;
  text-align: right;
  font-size: 28px;
  line-height: 1.5;
  font-weight: 400;
}

.header-text p {
  margin: 0;
  color: #fff;
  font-size: 26px;
  line-height: 1.4;
  text-align: left;
  margin-bottom: 120px;
}

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

/* ===============================
   📱 TABLET VIEW (≤992px)
================================= */
@media (max-width: 992px) {
  .main-banner {
    height: 90vh;
    background-position: top;
    justify-content: flex-end; /* Aligns content to the right */
    padding-right: 5%;
  }

  .header-text {
    font-size: 24px;
    max-width: 450px;
  }

  .header-text p {
    font-size: 22px;
  }
}

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

/* ===============================
   📲 MOBILE VIEW (≤768px)
================================= */
@media (max-width: 768px) {
  .main-banner {
    height: auto;
    padding: 120px 20px; /* Adds vertical padding */
    background-position: center top;
    justify-content: center; /* Centers content horizontally */
  }

  .header-text {
    text-align: center;
    max-width: 90%;
    font-size: 22px;
  }

  .header-text p {
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
  }
}

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

/* ===============================
   📞 EXTRA SMALL MOBILE (≤480px)
================================= */
@media (max-width: 480px) {
  .main-banner {
    padding: 100px 15px;
  }

  .header-text {
    font-size: 20px; 
  }

  .header-text p {
    font-size: 16px;
  }
}







/* .main-banner {
  background-image: url(../images/Banner.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 800px;
  padding-bottom: 240px; 
   text-align: center;
  background-color: #2a2a2a;
} */

/* .main-banner h2 {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  line-height: 74px;
}

.main-banner h2 em {
  font-style: normal;
  color: #00bdfe;
} */

/* .main-banner p {
  color: #fff;
  padding: 30px 0px;
  position: absolute; 
  right: 100px; 
  bottom: 200px;
  margin-top:-350px;
  text-align:right;
} */

.main-banner .buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.main-banner .big-border-button a {
  font-size: 20px;
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
  padding: 15px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  margin-right: 15px;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.main-banner .big-border-button a:hover {
  background-color: #fff;
  color: #00bdfe;
}

.main-banner .icon-button a {
  margin-top: 20px;
  display: inline-block;
  margin-left: 15px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  transition: all .3s;
}

.main-banner .icon-button a i {
  margin-right: 6px;
  font-size: 16px;
}

.main-banner .icon-button a:hover {
  color: #00bdfe;
}



/*
---------------------------------------------
featured
---------------------------------------------
*/ 

section.featured-items {
  margin-top: -150px;
}

.featured-items .item .thumb {
  position: relative;
}

.featured-items .item .thumb img {
  border-radius: 15px;
}

.featured-items .item .thumb:hover .hover-effect {
  top: 0;
  opacity: 1;
}

.featured-items .item .thumb .hover-effect {
  background-color: rgba(250,250,250,0.92);
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  opacity: 0;
  transition: all .3s;
}

.featured-items .item .thumb .hover-effect .content {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px 15px;
}

.featured-items .item .thumb .hover-effect .content h4 {
  font-size: 20px;
  color: #00bdfe;
  margin-bottom: 22px;
}

.featured-items .item .thumb .hover-effect .content h4 i {
  font-size: 14px;
  margin-left: 5px;
  font-weight: 600;
}

.featured-items .item .thumb .hover-effect .content h4 span {
  font-size: 14px;
  font-weight: 500;
  color: #afafaf;
}

.featured-items .item .thumb .hover-effect .content ul li {
  font-size: 15px;
  font-weight: 400;
  color: #afafaf;
  margin-bottom: 7px;
}

.featured-items .item .thumb .hover-effect .content ul li:last-child {
  margin-bottom: 0px;
}

.featured-items .item .thumb .hover-effect .content ul li span {
  color: #2a2a2a;
  font-weight: 500;
}

.featured-items .owl-nav {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-35px);
}

.featured-items .owl-nav .owl-prev {
  position: absolute;
  left: -70px;
}

.featured-items .owl-nav .owl-next {
  position: absolute;
  right: -70px;
}

.featured-items .owl-nav .owl-prev span,
.featured-items .owl-nav .owl-next span  {
  width: 46px;
  height: 46px;
  line-height: 46px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: #00bdfe;
  border-radius: 50%;
  opacity: 0.75;
  transition: all .3s;
}

.featured-items .owl-nav .owl-prev span:hover,
.featured-items .owl-nav .owl-next span:hover {
  opacity: 1;
}


/*
---------------------------------------------
popular categories
---------------------------------------------
*/ 

section.popular-categories {
  padding: 0px 65px;
}

section.popular-categories .main-button {
  text-align: right;
}

.popular-item {
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  padding: 30px;
}

.popular-item .top-content {
  display: flex;
  margin-bottom: 30px;
}

.popular-item .icon {
  background-color: #f7f7f7;
  width: 75px;
  height: 75px;
  display: inline-block;
  text-align: center;
  line-height: 75px;
  border-radius: 10px;
  margin-right: 20px;
}

.popular-item .icon img {
  max-width: 36px;
  border-radius: 0px;
}

.popular-item h4 {
  font-size: 20px;
  margin-top: 5px;
  font-weight: 700;
  margin-bottom: 12px;
}

.popular-item span em {
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  padding: 5px 8px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #00bdfe;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
  margin-right: 10px;
}

.popular-item span {
  color: #afafaf;
  font-weight: 400;
}

.popular-item img {
  border-radius: 15px;
}

.popular-item .thumb {
  position: relative;
  overflow: hidden;
}

.popular-item .thumb span.category {
  font-size: 15px;
  color: #00bdfe;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 500;
  position: absolute;
  left: 15px;
  top: -60px;
  padding: 8px 12px;
  opacity: 0;
  transition: all .3s;
}

.popular-item .thumb span.likes {
  font-size: 15px;
  color: #00bdfe;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 500;
  position: absolute;
  right: 15px;
  top: -60px;
  padding: 8px 12px;
  opacity: 0;
  transition: all .3s;
}

.popular-item .thumb:hover span.category,
.popular-item .thumb:hover span.likes {
  top: 15px;
  opacity: 1;
}

.popular-item .border-button {
  margin-top: 30px;
}

.popular-item .border-button a {
  width: 100%;
  text-align: center;
}


/*
---------------------------------------------
closed contests
---------------------------------------------
*/ 

section.closed-contests {
  background-image: url(../images/closed-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px;
}

.closed-item .thumb {
  position: relative;
  overflow: hidden;
}

.closed-item .thumb img {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}

.closed-item .thumb span.winner {
  font-size: 15px;
  color: #00bdfe;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 500;
  position: absolute;
  left: 15px;
  top: -60px;
  padding: 8px 12px;
  opacity: 0;
  transition: all .3s;
}

.closed-item .thumb span.winner em {
  color: #afafaf;
  font-style: normal;
}

.closed-item .thumb span.price {
  font-size: 15px;
  color: #00bdfe;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 500;
  position: absolute;
  right: 15px;
  top: -60px;
  padding: 8px 12px;
  opacity: 0;
  transition: all .3s;
}

.closed-item .thumb span.price em {
  color: #afafaf;
  font-style: normal;
}

.closed-item .thumb:hover span.price,
.closed-item .thumb:hover span.winner {
  opacity: 1;
  top: 15px;
}

.closed-item .down-content {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: #fff;
  padding: 25px 30px;
}

.closed-item .down-content h4.pics {
  text-align: right;
}

.closed-item .down-content h4 {
  font-size: 18px;
  line-height: 32px;
}

.closed-item .down-content h4 span {
  font-size: 15px;
  color: #afafaf;
}

.closed-contests .owl-nav {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-35px);
}

.closed-contests .owl-nav .owl-prev {
  position: absolute;
  left: -70px;
}

.closed-contests .owl-nav .owl-next {
  position: absolute;
  right: -70px;
}

.closed-contests .owl-nav .owl-prev span,
.closed-contests .owl-nav .owl-next span  {
  width: 46px;
  height: 46px;
  line-height: 46px;
  font-size: 24px;
  display: inline-block;
  color: #afafaf;
  background-color: #fff;
  border-radius: 50%;
  transition: all .3s;
}

.closed-contests .owl-nav .owl-prev span:hover,
.closed-contests .owl-nav .owl-next span:hover {
  background-color: #00bdfe;
  color: #fff;
}

.closed-contests .border-button {
  margin-top: 20px;
}


/*
---------------------------------------------
pricing-plans
---------------------------------------------
*/ 

.pricing-item {
  text-align: center;
  padding: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  transition: all .5s;
}

.pricing-item:hover {
  border: 1px solid transparent;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
}

.pricing-item:hover h4 {
  color: #00bdfe;
}

.pricing-item img {
  max-width: 240px;
}

.pricing-item h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #d4d4d4;
  transition: all .5s;
}

.pricing-item ul li {
  font-size: 15px;
  color: #00bdfe;
  margin-bottom: 10px;
}

.pricing-item ul.first-plan li:nth-child(5),
.pricing-item ul.first-plan li:nth-child(4) {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item ul.second-plan li:nth-child(5) {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item ul li:last-child {
  margin-bottom: 0px;
}

.pricing-item span.price {
  font-size: 30px;
  color: #00bdfe;
  font-weight: 700;
  display: inline-block;
  margin-top: 30px;
}

.pricing-item .border-button {
  margin-top: 30px;
}


/* ==============================
   FOOTER - MAIN STYLES
================================*/
.footer{
   background-color: rgb(238, 238, 238);
}
.top-footer {
  background-color: rgb(238, 238, 238);
  width: 100%;
}

/* ---------- Top Section ---------- */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap; /* stacks on smaller screens */
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px;
}

/* ---------- Logo ---------- */
.footer-logo {
  flex: 0 0 auto;
  text-align: left;
}
.footer-logo .logo img {
  max-width: 170px;
  height: 150px;
  display: block;
  object-fit: contain;
}

/* SOCIAL ICONS BELOW LOGO – LARGE, NO TEXT */
.footer-logo .social-icons {
  text-align: center;
}
.footer-logo .icons-wrapper {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 30px;
}
.footer-logo .icons-wrapper a {
  color: #000;
  font-size: 28px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.footer-logo .icons-wrapper a:hover {
  color: #fff;
  background: #00c2ff;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 194, 255, 0.3);
}

/* ---------- Contact Section ---------- */
.contact-section {
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 0 !important;     
   margin-right: 0 !important;
  justify-content: center; 
  margin-bottom: 60px;
}

/* Contact Row (Horizontal) */
.contact-row {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 90px;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* Contact Item */
.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
}
.contact-item i {
  font-size: 22px;
  color: black;
  margin-bottom: 6px;
}
.contact-item p {
  margin-top: 16px;
  font-size: 14px;
  color: black;
  line-height: 1.5;
  word-break: break-word;
  white-space: normal;
  margin-bottom: 35px;
}

/* Hyperlinks */
.contact-link {
  color: black;
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

/* Only address block width adjusted */
.contact-item:nth-child(2) {
  max-width: 820px;
}
.contact-item:nth-child(2) p {
  line-height: 1.5;
  text-align: left;
}
.contact-item:nth-child(2) a {
  display: inline-block;
  word-break: break-word;
  white-space: normal;
}

/* Hover effect for links */
.top-footer a:hover {
  color: #00c2ff;
  text-decoration: underline;
}

/* ---------- Divider Above Links ---------- */
.footer-divider {
  width: 50%;
  margin: -20px auto 0;
  border: none;
  border-top: 1px solid #474545;
  opacity: 0.4;
}

/* ---------- Footer Links Section ---------- */
.footer-links {
  text-align: center;
  margin-top: 0;
  padding: 10px 0;
}
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 40px;
  cursor: pointer;
}
.footer-links ul li {
  display: inline-block;
}
.footer-links a {
  text-decoration: none;
  color: black;
  font-size: 14px;
  transition: 0.3s;
}

/* Social footer icons */
.social-footer-links li {
  display: flex;
  flex-wrap: wrap;
  font-size: 22px;
}

/* ---------- Bottom Bar ---------- */
.footer-bottom {
  text-align: center;
  background-color: #00bdfe;
  padding: 12px;
  font-size: 15px;
  color: black;
  width: 100%;
  display: block;
}
.footer-bottom p {
  margin: 0;
  color: black;
  font-size: 14px;
}


/* ==============================
   RESPONSIVE ONLY (FINAL)
================================*/

/* 1200px and below */
@media (max-width: 1200px) {
  .contact-section {
    margin-left: 20px !important;
    justify-content: center;
  }

  .contact-row {
    gap: 50px !important;
  }
}

/* 991px and below — Tablet */
@media (max-width: 991px) {

  .footer-top {
    flex-direction: column;
    text-align: center;
    padding: 20px 15px;
  }

  /* Logo */
  .footer-logo {
    width: 100%;
    margin-bottom: 25px;
    text-align: center;
  }

  .footer-logo .logo img {
    margin: 0 auto;
  }

  .footer-logo .icons-wrapper {
    justify-content: center !important;
  }

  /* Contact section stack */
  .contact-section {
    width: 100%;
    margin: 0 !important;
    justify-content: center !important;
  }

  .contact-row {
    width: 100%;
    flex-direction: column;
    gap: 30px !important;
    align-items: center;
    margin-top: 20px !important;
  }

  .contact-item {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .contact-item p {
    text-align: center !important;
    word-break: break-word;
  }

  .footer-divider {
    width: 80%;
    margin: 10px auto 20px;
  }

  .footer-links ul {
    gap: 25px !important;
    justify-content: center;
  }
}

/* 768px and below — Mobile */
@media (max-width: 768px) {

  /* Prevent footer cutting */
  .footer,
  .top-footer,
  .footer-top,
  .contact-section,
  .contact-row {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .footer-top {
    padding-bottom: 40px !important;
  }

  .contact-item {
    padding-bottom: 25px !important;
  }

  .contact-item i {
    margin-bottom: 10px;
  }

  .footer-logo .icons-wrapper {
    margin-bottom: 25px !important;
  }
}

/* 576px and below — Phones */
@media (max-width: 576px) {

  .footer-top {
    padding: 16px 12px !important;
  }

  .footer-logo .logo img {
    max-width: 130px !important;
  }

  .contact-item p {
    font-size: 14px !important;
    line-height: 1.5;
  }

  .footer-links a {
    font-size: 13px !important;
  }

  .footer-divider {
    width: 90% !important;
  }
}

/* Extra-small phones */
@media (max-width: 400px) {

  .footer-logo .logo img {
    max-width: 110px !important;
  }

  .footer-links ul {
    gap: 12px !important;
  }

  .contact-item p {
    font-size: 13px !important;
  }
}



/* ------------------------------
   ABOUT PAGE BANNER SECTION
------------------------------ */
.other-banner {
  position: relative;
  width: 100%;
  height: 55vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* move text to the left */
  text-align: left;
  /* margin-top: 80px; */
  padding-left: 80px;
}

/* Banner Image */
.other-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(0.8);
  z-index: 0;
}

/* Overlay */
.other-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* Text Container */
.other-banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  text-align: center;
  width: 100%;
  padding: 0 20px;
}

/* Heading */
.other-banner-text h2 {
  font-size: 60px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}

/* ------------------------------
   ✅ Responsive Design
------------------------------ */

/* Large screens */
@media (max-width: 1200px) {
  .other-banner {
    height: 50vh;
    padding-left: 60px;
  }

  .other-banner-text h2 {
    font-size: 52px;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .other-banner {
    height: 45vh;
    padding-left: 40px;
  }

  .other-banner-text h2 {
    font-size: 42px;
    margin-left: 60px;
  }

  .other-banner-text h2::after {
    width: 70px;
  }
}

/* Mobile Landscape / Small Tablets */
@media (max-width: 768px) {
  .product-banner {
    justify-content: center;
    text-align: center;
    padding-left: 0;
  }

  /* ✅ Fixed class typo: was `.productbanner-text` */
  .other-banner-text {
    max-width: 100%;
  }

  .other-banner-text h2 {
    font-size: 36px;
    margin-left: 0;
    text-align: center;
  }

  .other-banner-text h2::after {
    margin: 18px auto 0;
    width: 60px;
  }
}

/* Small Mobiles */
@media (max-width: 576px) {
  .other-banner {
    height: 38vh;
  }

  .other-banner-text h2 {
    font-size: 28px;
    margin-left: 0;
  }

  .other-banner-text h2::after {
    width: 50px;
    height: 3px;
  }
}

/* Extra Small */
@media (max-width: 400px) {
  .other-banner {
    height: 35vh;
  }

  .other-banner-text h2 {
    font-size: 24px;
  }
}







/* ------------------------------
   SERVICES PAGE BANNER SECTION
------------------------------ */
.service-banner {
  position: relative;
  width: 100%;
  height: 55vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; /* ✅ centers text horizontally */
  text-align: center;      /* ✅ centers text alignment */
  margin-top: 100px;
  padding: 0 20px;
}

/* Banner Image */
.service-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(0.8);
  z-index: 0;
}

/* Overlay */
.service-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* Text Container */
.service-banner-text {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 800px;
  text-align: center;
}

/* Heading */
.service-banner-text h2 {
  font-size: 60px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  color: #fff;
}

/* Decorative underline */
/* .service-banner-text h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 4px;
  background: #00a19a;
  margin: 18px auto 0; 
  border-radius: 2px;
} */

/* ------------------------------
   RESPONSIVENESS
------------------------------ */

/* Large screens */
@media (max-width: 1200px) {
  .service-banner {
    height: 50vh;
  }

  .service-banner-text h2 {
    font-size: 52px;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .service-banner {
    height: 45vh;
  }

  .service-banner-text h2 {
    font-size: 42px;
  }

  .service-banner-text h2::after {
    width: 70px;
  }
}

/* Mobile Landscape / Small Tablets */
@media (max-width: 768px) {
  .service-banner {
    height: 40vh;
    padding: 0 10px;
  }

  .service-banner-text {
    max-width: 100%;
  }

  .service-banner-text h2 {
    font-size: 36px;
  }

  .service-banner-text h2::after {
    width: 60px;
  }
}

/* Small Mobiles */
@media (max-width: 576px) {
  .service-banner {
    height: 38vh;
  }

  .service-banner-text h2 {
    font-size: 28px;
  }

  .service-banner-text h2::after {
    width: 50px;
    height: 3px;
  }
}

/* Extra Small */
@media (max-width: 400px) {
  .service-banner {
    height: 35vh;
  }

  .service-banner-text h2 {
    font-size: 24px;
  }
}


/* ------------------------------
   products PAGE BANNER SECTION
------------------------------ */
.product-banner {
  position: relative;
  width: 100%;
  height: 55vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* move text to the left */
  text-align: left;
  /* margin-top: 80px; */
  padding-left: 80px;
}

/* Banner Image */
.product-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(0.8);
  z-index: 0;
}

/* Overlay */
.product-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* Text Container */
.product-banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  text-align: center;
  width: 100%;
  padding: 0 20px;
}

/* Main heading */
.product-banner-text h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 30px 0;
  color: #fff;
  text-align: center;

  /* Responsive font size for all desktop screens */
  font-size: clamp(32px, 4vw, 60px);
}


/* ------------------------------
   ✅ Responsive Design
------------------------------ */

/* Large screens */
@media (max-width: 1200px) {
  .product-banner {
    height: 50vh;
    padding-left: 60px;
  }

  .product-banner-text h2 {
    font-size: 52px;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .product-banner {
    height: 45vh;
    padding-left: 40px;
  }

  .product-banner-text h2 {
    font-size: 42px;
    margin-left: 60px;
  }

  .product-banner-text h2::after {
    width: 70px;
  }
}

/* Mobile Landscape / Small Tablets */
@media (max-width: 768px) {
  .product-banner {
    justify-content: center;
    text-align: center;
    padding-left: 0;
  }

  /* ✅ Fixed class typo: was `.productbanner-text` */
  .product-banner-text {
    max-width: 100%;
  }

  .product-banner-text h2 {
    font-size: 36px;
    margin-left: 0;
    text-align: center;
  }

  .product-banner-text h2::after {
    margin: 18px auto 0;
    width: 60px;
  }
}

/* Small Mobiles */
@media (max-width: 576px) {
  .product-banner {
    height: 38vh;
  }

  .product-banner-text h2 {
    font-size: 28px;
    margin-left: 0;
  }

  .product-banner-text h2::after {
    width: 50px;
    height: 3px;
  }
}

/* Extra Small */
@media (max-width: 400px) {
  .product-banner {
    height: 35vh;
  }

  .product-banner-text h2 {
    font-size: 24px;
  }
}
/* productbreadcrumbs */
/* =====================================
   PRODUCT BREADCRUMBS (Base Style)
===================================== */
.productbanner-breadcrumbs {
  margin-top: 100px;
  margin-right: 80px;   /* ✅ Added */
  width: 100%;
  font-size: 14px;
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  font-weight: 500;
  position: relative;
  z-index: 20;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.productbanner-breadcrumbs a {
  color: #fff;
  text-decoration: none;
}

.productbanner-breadcrumbs span {
  color: #eee;
}

/* ===========================
   TABLET & MOBILE
   (Remove margin-right)
=========================== */
@media (max-width: 991px) {
  .productbanner-breadcrumbs {
    margin-right: 0 !important;     /* ✅ Remove margin */
    margin-top: 30px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .productbanner-breadcrumbs {
    margin-right: 0 !important;     /* still removed */
     font-size: 12px !important;
  }
}

@media (max-width: 400px) {
  .productbanner-breadcrumbs {
    margin-right: 0 !important;     /* still removed */
     font-size: 11.5px !important;
  }
}



/* mainproductbanner breadcrumb */

/* ==========================================
   Breadcrumbs under title (BASE)
========================================== */
.productmainbanner-breadcrumbs {
  margin-top: 100px;
  margin-right: 80px;          /* ✔ Desktop margin-right */
  font-size: 14px;             /* ✔ Desktop font size */
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  font-weight: 500;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
  width: 100%;
  z-index: 20;
}

/* Breadcrumb Links */
.productmainbanner-breadcrumbs a {
  color: #fff;
  text-decoration: none;
}

.productmainbanner-breadcrumbs span {
  color: #eee;
}

/* ==========================================
   Desktop only
========================================== */
@media (min-width: 1024px) {
  .productmainbanner-breadcrumbs {
    position: relative;
  }
}

/* ==========================================
   Tablets (max-width: 991px)
   → Remove right margin, center content
========================================== */
@media (max-width: 991px) {
  .productmainbanner-breadcrumbs {
    margin-right: 0 !important;   /* ✔ remove 80px margin */
    margin-top: 30px !important;  
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }
}

/* ==========================================
   Mobile (max-width: 576px)
   → Small font + no margin-right
========================================== */
@media (max-width: 576px) {
  .productmainbanner-breadcrumbs {
    font-size: 12px !important;   /* ✔ one step smaller */
    gap: 6px;
    padding: 0 10px;
    margin-right: 0 !important;
    margin-top: 45px !important;
    flex-wrap: wrap;
  }
}

/* ==========================================
   Extra Small Phones (max-width: 400px)
========================================== */
@media (max-width: 400px) {
  .productmainbanner-breadcrumbs {
    font-size: 11px !important;   /* ✔ slightly smaller */
    gap: 4px;
  }
}


/* subproducts breadcrumbs */
/* =====================================================
   📌 BREADCRUMBS UNDER TITLE — BASE STYLE (Desktop)
===================================================== */
.pbanner-breadcrumbs {
  margin-top: 100px;
  margin-right: 80px;              /* ✅ Desktop margin-right */
  width: 100%;
  font-size: 14px;
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  font-weight: 500;
  position: relative;
  z-index: 20;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.pbanner-breadcrumbs a {
  color: #fff;
  text-decoration: none;
}

.pbanner-breadcrumbs span {
  color: #eee;
}


/* =====================================================
   🖥️ DESKTOP BREAKPOINTS (Different font sizes)
===================================================== */

/* Large desktop (1600px+) */
@media (min-width: 1600px) {
  .pbanner-breadcrumbs {
    font-size: 16px;
  }
}

/* Standard desktop (1200px–1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
  .pbanner-breadcrumbs {
    font-size: 15px;
  }
}

/* Small desktop / Laptop (992px–1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .pbanner-breadcrumbs {
    font-size: 14px;
  }
}


/* =====================================================
   📱 TABLET + MOBILE (Remove margin-right & adjust font)
===================================================== */
@media (max-width: 991px) {
  .pbanner-breadcrumbs {
    margin-right: 0 !important;     /* ✅ Remove margin-right */
    margin-top: 64px !important;
    width: 100%;

    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;

    font-size: 13px;                /* One step smaller */
    gap: 6px;
  }
}

/* =====================================================
   📱 SMALL MOBILE (≤576px)
===================================================== */
@media (max-width: 576px) {
  .pbanner-breadcrumbs {
    font-size: 12.5px;              /* Smaller font on mobile */
    padding: 0 10px;
    gap: 4px;
    margin-top: 50px !important;
    margin-right: 0 !important;     /* Never apply margin on mobile */
  }
}

/* =====================================================
   📱 EXTRA SMALL PHONES (≤400px)
===================================================== */
@media (max-width: 400px) {
  .pbanner-breadcrumbs {
    font-size: 12px;                /* Extra small font */
    gap: 4px;
    margin-top: 50px !important;
    margin-right: 0 !important;
  }
}



/* virtualproducts breadcrumbs */
/* =======================================================
   DESKTOP (Default)
======================================================= */
.vbanner-breadcrumbs {
  margin-top: 100px;
  margin-right: 80px;   /* ✅ Added desktop margin-right */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  font-size: 14px;      /* Desktop font size */
  font-weight: 500;
  color: #fff;

  position: relative;
  z-index: 20;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.vbanner-breadcrumbs a {
  color: #fff;
  text-decoration: none;
}

.vbanner-breadcrumbs span {
  color: #eee;
}



/* =======================================================
   TABLET (max-width: 991px)
======================================================= */
@media (max-width: 991px) {
  .vbanner-breadcrumbs {
    margin-right: 0 !important;      /* ❌ Remove desktop offset */
    margin-top: 64px !important;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    gap: 6px;
    font-size: 13px;                 /* Slightly smaller */
  }
}



/* =======================================================
   SMALL MOBILE (max-width: 576px)
======================================================= */
@media (max-width: 576px) {
  .vbanner-breadcrumbs {
    font-size: 12px !important;          /* ✅ One size smaller */
    padding: 0 10px;
    gap: 4px;
    margin-top: 100px !important;
    margin-right: 0 !important;
  }
}



/* =======================================================
   EXTRA SMALL (max-width: 400px)
======================================================= */
@media (max-width: 400px) {
  .vbanner-breadcrumbs {
    font-size: 11px !important;         /* Even smaller */
    gap: 4px;
    margin-top: 80px !important;
    margin-right: 0 !important;
  }
}



/* securityproducts breadcrumbs */
/* Breadcrumbs under title – CENTERED for all desktop screens */
.sebanner-breadcrumbs {
  margin-top: 100px;
  margin-right: 80px;        /* ✅ Added margin-right for desktop */
  font-size: 14px;           /* Desktop font size */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;   /* keeps it centered */
  gap: 8px;
  font-weight: 500;
  position: relative;
  z-index: 20;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
  width: 100%;
}

/* Links */
.sebanner-breadcrumbs a {
  color: #fff;
  text-decoration: none;
}

.sebanner-breadcrumbs span {
  color: #eee;
}



/* =========================================
   📱 MOBILE + TABLET (max-width: 991px)
========================================= */
@media (max-width: 991px) {
  .sebanner-breadcrumbs {
    margin-right: 0 !important;     /* ✅ remove margin-right on mobile */
    margin-left: 0 !important;
    margin-top: 64px !important;
    font-size: 13px;                /* ✅ one size smaller on tablet/mobile */
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* =========================================
   📱 SMALL MOBILE (max-width: 576px)
========================================= */
@media (max-width: 576px) {
  .sebanner-breadcrumbs {
    font-size: 12.5px;              /* ✅ smaller for mobile */
    padding: 0 10px;
    gap: 4px;
    margin-top: 90px !important;
    margin-right: 0 !important;     /* keep centered */
  }
}

/* =========================================
   📱 EXTRA SMALL (max-width: 400px)
========================================= */
@media (max-width: 400px) {
  .sebanner-breadcrumbs {
    font-size: 12px;                /* smallest size */
    gap: 4px;
    margin-top: 80px !important;
    margin-right: 0 !important;
  }
}





/* operating software breadcrumbs */
/* =====================================
   BREADCRUMBS (Desktop Default)
===================================== */
.opbanner-breadcrumbs {
  margin-top: 100px;
  margin-right: 80px;          /* ✅ Desktop margin-right added */
  width: 100%;
  font-size: 14px;             /* Desktop font size */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;     
  gap: 8px;
  font-weight: 500;
  position: relative;
  z-index: 20;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
  padding: 0 20px;
  box-sizing: border-box;
}

.opbanner-breadcrumbs a {
  color: #fff;
  text-decoration: none;
}

.opbanner-breadcrumbs span {
  color: #eee;
}

/* =====================================
   LARGE DESKTOP (1600px+)
===================================== */
@media (min-width: 1600px) {
  .opbanner-breadcrumbs {
    font-size: 15px;    /* Slightly bigger on large screens */
  }
}


/* =====================================
   TABLET + MOBILE (≤ 991px)
===================================== */
@media (max-width: 991px) {
  .opbanner-breadcrumbs {
    margin-right: 0 !important;   /* ❌ remove right margin on mobile/tablet */
    margin-top: 35px !important;
    font-size: 13px;              /* one step smaller */
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px;
  }
}


/* =====================================
   SMALL MOBILE (≤ 576px)
===================================== */
@media (max-width: 576px) {
  .opbanner-breadcrumbs {
    font-size: 12px;            /* smaller for mobile */
    gap: 5px;
    padding: 0 10px;
    margin-top: 120px !important; 
  }
}


/* =====================================
   EXTRA SMALL (≤ 400px)
===================================== */
@media (max-width: 400px) {
  .opbanner-breadcrumbs {
    font-size: 11.5px;         /* slightly smaller text */
    gap: 4px;
    margin-top: 110px !important;
  }
}





/* ------------------------------
   PRODUCTS SECTION
------------------------------ */
.products-section {
  display: flex;
  flex-wrap: nowrap;       /* prevent wrapping */
  justify-content: center; /* keep centered */
  gap: 30px;               /* balanced spacing */
  margin: 40px auto;
  width: 100%;             /* use full width */
  overflow-x: auto;
}

/* Card Wrapper */
.product-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none; /* remove underline */
  color: inherit;
  display: block; /* ensures full clickable area */
   flex: 0 0 auto; 
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Image Container */
.product-image {
  position: relative;
  width: 580px;
  height: 380px;
  overflow: hidden;
  border-radius: 12px;
}

/* Image Styling */
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-card:hover img {
  transform: scale(1.05);
}

/* Overlay for heading + arrow */
.product-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  opacity: 1;
  transition: background 0.3s ease;
}

.product-card:hover .product-overlay {
  background: rgba(0,0,0,0.55);
}

/* Heading */
.product-overlay h4 {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 280px;
  text-align: center;
  letter-spacing: 0.5px;
  color: white;
}

  .arrow-link {
  position: absolute;
  bottom: 25px;
  right: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  font-size: 18px;
  transition: all 0.3s ease;
}



.product-card:hover .arrow-link {
  background: #fff;
  color: #000;
}

/* ---------------------------------
   📱 Tablet Responsive (992px)
---------------------------------- */
@media (max-width: 992px) {
  .products-section {
    gap: 25px;
  }

  .product-card {
    width: 100%;
    max-width: 600px;
  }

  .product-image {
    width: 100%;
    height: 300px;
  }

  .product-overlay h4 {
    font-size: 26px;
    margin-bottom: 0;
  }
}

/* ---------------------------------
   📱 Mobile Responsive (768px)
---------------------------------- */
@media (max-width: 768px) {

  .products-section {
    flex-wrap: wrap !important;   /* allow cards to move down */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-x: visible !important; /* stop horizontal scroll */
    gap: 20px !important;
  }

  .product-card {
    width: 95% !important;
    max-width: 420px !important;
  }

  .product-image {
    width: 100% !important;
    height: 260px !important;
  }

  .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* keeps image proper */
  }

  .product-overlay {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: rgba(0,0,0,0.45);
     padding-top: 15px !important;
  }

  .product-overlay h4 {
    font-size: 22px;
    margin: 0;
    padding: 0 10px;
    line-height: 1.3;
    text-align: center;
  }

  .arrow-link {
    width: 38px;
    height: 38px;
    font-size: 15px;
    bottom: 18px;
    right: 18px;
  }
}

/* ---------------------------------
   📱 Small-Mobile (480px)
---------------------------------- */
@media (max-width: 480px) {

  .product-card {
    width: 100%;
     max-width: 360px !important;
  }

  .product-image {
    width: 100%;
    height: 240px !important;
  }

  .product-image img {
    height: 100%;
    object-fit: cover;
  }

  .product-overlay h4 {
    font-size: 18px;
    margin: 0;
    padding: 0 10px;
  }

  .arrow-link {
    width: 34px;
    height: 34px;
    font-size: 14px;
    bottom: 15px;
    right: 15px;
  }
}


/* 
---------------------------------------------
Contests Page
--------------------------------------------- 
*/

#search-form {
  margin-top: -69px;
  background-color: #fff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

#search-form label {
  font-size: 15px;
  color: #2a2a2a;
  font-weight: 500;
}

#search-form input,
#search-form select {
  background-color: #f7f7f7;
  width: 100%;
  height: 46px;
  border-radius: 10px;
  bordeR: none;
  outline: none;
  padding: 0px 15px;
  font-size: 15px;
  color: #afafaf;
}

#search-form input::placeholder {
  color: #afafaf;
}

#search-form button {
  margin-top: 30px;
  font-size: 15px;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 189, 254);
  border: 1px solid rgb(0, 189, 254);
  padding: 10px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all 0.3s ease 0s;
}

#search-form button:hover {
  background-color: transparent;
  color: #00bdfe;
}

.photos-videos .section-heading h6{
  color: #25a7cb;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 15px;
}

.photos-videos .item {
  margin-bottom: 30px;
}

.photos-videos .item .thumb {
  position: relative;
  overflow: hidden;
}

.photos-videos .item .thumb img {
  border-radius: 15px;
}

.photos-videos .item .thumb .play-button a {
  width: 46px;
  height: 46px;
  background-color: #fff;
  border-radius: 50%;
  color: #00bdfe;
  text-align: center;
  line-height: 46px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-23px,-23px);
  opacity: 0;
  transition: all .3s;
}

.photos-videos .item .thumb:hover .play-button a {
  opacity: 1;
}

.photos-videos .item .thumb .top-content {
  position: absolute;
  display: inline-block;
  top: 30px;
  left: 30px;
  right: 30px;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px 25px;
}

.photos-videos .item .thumb .top-content h4 {
  display: inline;
  font-size: 20px;
  font-weight: 700;
}

.photos-videos .item .thumb .top-content h6 {
  display: inline;
  float: right;
  margin-top: 5px;
  color: #afafaf;
  font-weight: 400;
  font-size: 15px;
}

.photos-videos .item .down-content h2 {
  font-size: 20px;
  color: #afafaf;
  font-weight: 700;
  margin-top: 20px;
  margin-left: 30px;
}

.photos-videos .item .down-content h6 {
  text-align: right;
  font-size: 15px;
  color: #00bdfe;
  font-weight: 500;
  margin-top: 24px;
  margin-right: 30px;
}

.contest-win {
  padding: 0px 65px;
}

.contest-win .contest-item {
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  padding: 30px;
}

.contest-win .contest-item .top-content {
  margin-bottom: 30px;
}

.contest-win .contest-item .top-content span.award {
  font-size: 15px;
  color: #fff;
  background-color: #00bdfe;
  border-radius: 10px;
  padding: 8px 12px;;
}

.contest-win .contest-item .top-content span.price {
  float: right;
  font-size: 20px;
  font-weight: 700;
  color: #00bdfe;
}

.contest-win .contest-item h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 25px;
  margin-bottom: 20px;
}

.contest-win .contest-item img {
  border-radius: 15px;
}

.contest-win .contest-item .info {
  display: flex;
  width: 100%;
}

.contest-win .contest-item span.participants {
  font-size: 15px;
  font-weight: 500;
  color: #afafaf;
  flex-basis: 50%;
}

.contest-win .contest-item span.participants img {
  border-radius: 0px;
  max-width: 24px;
  margin-bottom: 8px;
}

.contest-win .contest-item span.submittions {
  font-size: 15px;
  font-weight: 500;
  color: #afafaf;
  flex-basis: 50%;
  display: inline-block;
  text-align: right;
}

.contest-win .contest-item span.submittions img {
  border-radius: 0px;
  max-width: 24px;
  margin-bottom: 8px;
}

.contest-win .contest-item .border-button {
  margin-top: 25px;
  margin-bottom: 20px;
}

.contest-win .contest-item .border-button a {
  width: 100%;
  text-align: center;
}

.contest-win .contest-item span.info {
  font-size: 15px;
  display: inline-block;
  text-align: center;
  color: #afafaf;
}

.contest-win ul.pagination {
  justify-content: center;
  margin-top: 60px;
}

.contest-win ul.pagination li {
  margin: 0px 7px;
}

.contest-win ul.pagination li a {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  border: 1px solid #00bdfe;
  border-radius: 50%;
  color: #00bdfe;
  font-size: 20px;
  font-weight: 600;
}

.contest-win ul.pagination li.active a {
  background-color: #00bdfe;
  color: #fff;
}

.contest-win ul.pagination li:last-child a,
.contest-win ul.pagination li:first-child a {
  border-color: transparent;
}


/* =====================================
   CONTEST-WAITING SECTION – BASE
===================================== */
.contest-waiting {
  padding: 40px 0;
  background: #f9f9f9;
}
.contest-waiting .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ---------- Heading ---------- */
.contest-waiting .heading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 50px;
  text-align: center;
}
.contest-waiting .heading h3 {
  font-size: 38px;
  font-weight: 700;
  color: #0078d4;
  margin: 0;
}
.contest-waiting .desktop-view-btn {
  position: absolute;
  right: 0;
  background: #0078d4;
  color: #fff;
  font-size: 16px;
  padding: 6px 14px;
  border-radius: 4px;
  border: none;
  height: 48px;
  cursor: pointer;
  transition: background .3s;
}
.contest-waiting .desktop-view-btn:hover { background: #005da8; }

/* ---------- Cards ---------- */
.waiting-item {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transition: transform .4s, box-shadow .4s;
   display: flex;
  flex-direction: column;
  height: 100%; 
  
}
.waiting-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}
.waiting-item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.waiting-item .down-content {
  padding: 20px;
  text-align: center;
}
.waiting-item .down-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

/* Grid */
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: -25px;
}
.col-lg-3, .col-md-6, .col-sm-12 {
  display: flex;
  justify-content: center;
  padding-top: 25px;
}

/* Mobile button (hidden by default) */
.mobile-view-more {
  display: none;
  text-align: center;
  margin: 25px auto 15px;
}
.mobile-view-btn {
  background: #0078d4;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 0;
  width: 160px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background .3s;
}
.mobile-view-btn:hover,
.mobile-view-btn:active { background: #005da8; }

/* =====================================
   RESPONSIVE
===================================== */
/* ============= TABLET (max-width: 992px) ============= */
@media (max-width: 992px) {
  .contest-waiting .heading {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .contest-waiting .desktop-view-btn {
    position: static;
  }

  .waiting-item img {
    height: 220px;
  }
}

/* ============= MOBILE (max-width: 768px) ============= */
@media (max-width: 768px) {

  /* Hide desktop View More */
  .contest-waiting .desktop-view-btn {
    display: none !important;
  }

  /* Mobile grid */
  .row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .col-lg-3, .col-md-6, .col-sm-12 {
    padding-top: 0;
  }

  /* Heading bigger on mobile */
  .contest-waiting .heading h3 {
    font-size: 32px;
    line-height: 1.3;
  }

  /* Card image */
  .waiting-item img {
    height: 250px;
  }

  /* Show mobile View More */
  .mobile-view-more {
    display: block !important;
    text-align: center;
    margin: 25px auto 15px;
  }

  .mobile-view-btn {
    width: 120px;
    padding: 8px 0;
    font-size: 16px;
    font-weight: 500;
    background: #0078d4;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }
  .mobile-view-btn:hover {
    background: #005da8;
  }
}
/* ============= SMALL MOBILES ============= */
@media (max-width: 575px) {
  .contest-waiting .heading h3 {
    font-size: 28px;
  }
  .waiting-item img {
    height: 180px;
  }
}

@media (max-width: 480px) {
  .contest-waiting .heading h3 {
    font-size: 24px;
  }
  .waiting-item img {
    height: 220px;
  }
  .waiting-item .down-content h4 {
    font-size: 16px;
  }
   
  .waiting-item{
  height: 300px !important;
  width: 350px;
}
}

@media (max-width: 375px) {
  .contest-waiting .heading h3 {
    font-size: 22px;
  }
  .waiting-item img {
    height: 245px;
  }
   
  .waiting-item{
  height: 330px !important;
  width: 300px;
}
}

@media (max-width: 320px) {
  .contest-waiting .heading h3 {
    font-size: 20px;
  }
  .waiting-item img {
    height: 130px;
  }
   
}

/* Hide mobile button on desktop */
@media (min-width: 769px) {
  .mobile-view-more {
    display: none !important;
  }
}





/* Pagination */
.contest-waiting ul.pagination {
  display: flex;          
  justify-content: center; 
  align-items: center;    
  margin-top: 40px;
  padding-left: 0;       
  list-style: none;
}

.contest-waiting ul.pagination li {
  margin: 0 7px;
}

.contest-waiting ul.pagination li a {
  width: 44px;
  height: 44px;
  display: inline-block;
  text-align: center;
  line-height: 42px;
  border: 1px solid #00bdfe;
  border-radius: 50%;
  color: #00bdfe;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.contest-waiting ul.pagination li a:hover {
  background-color: #00bdfe;
  color: #fff;
}

.contest-waiting ul.pagination li.active a {
  background-color: #00bdfe;
  color: #fff;
}

.contest-waiting ul.pagination li:first-child a,
.contest-waiting ul.pagination li:last-child a {
  border-color: transparent;
}



/* 
---------------------------------------------
Categories Page
--------------------------------------------- 
*/

.top-categories {
  margin-top: -100px;
}

.top-categories .item {
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 30px;
}

.top-categories .item .icon {
  background-color: #f7f7f7;
  width: 75px;
  height: 75px;
  display: inline-block;
  text-align: center;
  line-height: 75px;
  border-radius: 10px;
}

.top-categories .item .icon img {
  max-width: 36px;
  border-radius: 0px;
}

.top-categories .item h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 10px;
}

.top-categories .item span {
  font-size: 15px;
  color: #afafaf;
  display: block;
}

.top-categories .item span.counter {
  margin-top: 10px;
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  display: inline-block;
  padding: 5px 8px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #00bdfe;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 6%);
  margin-right: 10px;
}

.featured-contests .item  {
  margin-bottom: 30px;
}

.featured-contests .item .thumb {
  position: relative;
  overflow: hidden;
}

.featured-contests .item .thumb  img {
  border-radius: 15px;
}

.featured-contests .item .hover-effect {
  position: absolute;
  right: -100%;
  bottom: 15px;
  transition: all .5s;
}

.featured-contests .item .thumb:hover .hover-effect {
  right: 15px;
  bottom: 15px;
}

.featured-contests .item .hover-effect .content {
  background-color: #fff;
  border-radius: 15px;
  padding: 25px 20px;
}

.featured-contests .item .hover-effect .content .top-content {
  margin-bottom: 20px;
}

.featured-contests .item .hover-effect .content .top-content span.award {
  font-size: 15px;
  color: #fff;
  background-color: #00bdfe;
  border-radius: 10px;
  padding: 8px 12px;;
}

.featured-contests .item .hover-effect .content .top-content span.price {
  float: right;
  font-size: 20px;
  font-weight: 700;
  color: #00bdfe;
}

.featured-contests .item .hover-effect .content h4 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 25px;
  margin-bottom: 20px;
}

.featured-contests .item .hover-effect .content img {
  border-radius: 15px;
}

.featured-contests .item .hover-effect .content .info {
  display: flex;
  width: 100%;
}

.featured-contests .item .hover-effect .content span.participants {
  font-size: 13px;
  font-weight: 500;
  color: #afafaf;
  flex-basis: 50%;
}

.featured-contests .item .hover-effect .content span.participants img {
  border-radius: 0px;
  max-width: 24px;
  margin-bottom: 8px;
}

.featured-contests .item .hover-effect .content span.submittions {
  font-size: 15px;
  font-weight: 500;
  color: #afafaf;
  flex-basis: 50%;
  display: inline-block;
  text-align: right;
}

.featured-contests .item .hover-effect .content span.submittions img {
  border-radius: 0px;
  max-width: 24px;
  margin-bottom: 8px;
}

.featured-contests .item .hover-effect .content .border-button {
  margin-top: 15px;
  margin-bottom: 0px;
}

.featured-contests .item .hover-effect .content .border-button a {
  width: 100%;
  text-align: center;
  padding: 10px 20px;
}

.featured-contests .item .hover-effect .content span.info {
  font-size: 15px;
  display: inline-block;
  text-align: center;
  color: #afafaf;
}

.testimonials {
  background-color: #f1fbff;
  padding: 120px 0px;
}

.testimonials .item {
  border: 1px solid #e0e0e0; 
  padding: 60px 60px 100px 60px;
  border-radius: 15px;
}

.testimonials .item .content {
  display: flex;
}

.testimonials .item .content .image {
  min-width: 240px;
}

.testimonials .item .content .image img {
  border-radius: 15px;
}

.testimonials .item p {
  font-size: 20px;
  font-weight: 600;
  color: #afafaf;
}

.testimonials .item .content .left-content {
  margin-right: 45px;
}

.testimonials .item .content .left-content h4 {
  display: inline-block;
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid #dfdfdf;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}

.testimonials .item .content .left-content span {
  display: block;
  font-size: 15px;
  color: #afafaf;
}

.testimonials .owl-dots {
  text-align: center;
  margin-top: -70px;
  margin-bottom: 120px;
  position: relative;
  z-index: 555;
}

.testimonials .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  border: 1px solid #afafaf;
  border-radius: 50%;
  margin: 0px 3px;
}

.testimonials .owl-dots .active {
  background-color: #00bdfe;
  border: 1px solid #00bdfe;
}


/* 
---------------------------------------------
Users Page
--------------------------------------------- 
*/

.user-info {
  text-align: center;
  margin-top: -85px;
}

.user-info h4 {
  font-size: 30px;
  font-weight: 700;
  margin-top: 30px;
}

.user-info .avatar img {
  max-width: 170px;
  border-radius: 50%;
  border: 1px solid #afafaf;
}

.user-info .info {
  margin-top: 30px;
  padding: 30px;
  border-radius: 15px;
  border: 1px solid #afafaf;
}

.user-info .info h4 {
  margin-top: 0px;
}

.user-info .info h6 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}

.user-info .info span {
  font-size: 15px;
  color: #afafaf;
  display: block;
  margin-top: 5px;
}

section.portfolio {
  padding: 80px 0px;
  background-color: #f7f7f7;
}

section.portfolio .thumb {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  margin-bottom: 30px;
}

section.portfolio .thumb:hover .hover-effect {
  opacity: 1;
  visibility: visible;
}

section.portfolio .thumb .hover-effect {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(42, 42, 42, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

section.portfolio .thumb .hover-effect .content {
  text-align: center;
  padding: 30px;
  display: inline-block;
  width: 100%;
}

section.portfolio .thumb .hover-effect .content h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}

section.portfolio .thumb .hover-effect .content span {
  font-size: 15px;
  color: #fff;
  margin: 10px;
}

section.portfolio .thumb .hover-effect .content span em {
  font-style: normal;
  font-weight: 700;
}

section.portfolio .thumb .hover-effect .content ul {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

section.portfolio .thumb .hover-effect .content ul li {
  display: inline-block;
  margin: 0px 5px;
}

section.portfolio .thumb .hover-effect .content ul li a {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 10px;
  background-color: #fff;
  color: #2a2a2a;
  font-size: 15px;
  transition: all .3s;
}

section.portfolio .thumb .hover-effect .content ul li a:hover {
  background-color: #00bdfe;
  color: #fff;
}

section.portfolio .main-button {
  text-align: center;
  margin-top: 30px;
}


/*blog section*/
.blog .info-item i {
  font-size: 80px;
  margin-right: 10px;
  color: #00bdfe;
}
.blog .row {
  display: flex;
  flex-wrap: nowrap;           
  justify-content: space-between;
  gap: 10px;
  margin-top: 80px;                    
}
.blog .info-item {
  flex: 1;
  text-align: center;
  padding: 30px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  transition: all .5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog.info-item h4 {
  font-size: 20px;
  margin: 10px 0;
  font-weight: 600;
}
.blog.row  p {
  font-size: 15px;
  margin: 10px 0;
  font-weight: 400;
  /* display: inline-block; */
  color: black;
}
.blog .col-lg-4 {
  display: flex;
}
/* Tablets */
@media (max-width: 992px) {
  .blog .col-lg-4 {
    flex: 1 1 45%; 
  }
  .blog .row {
  flex-wrap: wrap;
  }
  .blog .info-item i {
    font-size: 50px;
  }
  .blog .info-item h4 {
    font-size: 16px;
  }
  .blog .info-item p {
    font-size: 13px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .blog .col-lg-4 {
    flex: 1 1 100%; 
  }
  .blog .info-item i {
    font-size: 40px;
  }
  .blog .info-item h4 {
    font-size: 15px;
  }
  .blog .info-item p {
    font-size: 12px;
  }
}


/* contact page css */

.contact-info-section { 
  /* padding: 50px 0;  */
  /* background:#f8f9fa; */
}

.info-item {
  text-align:center;
  padding:30px;
  border-radius:15px;
  background:#fff;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
  transition:all .4s ease;
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
  width: 400px;                    /* ← Your fixed width */
}
.info-item:hover {
  transform:translateY(-5px);
  box-shadow:0 8px 25px rgba(0,0,0,.15);
}
.info-item i   {font-size:30px; margin-bottom:15px; color:#00bdfe;}
.info-item h4  {font-size:20px; margin:10px 0; font-weight:600; color:#222;}
.info-item span a {
  display:block;
  color:#333;
  text-decoration:none;
  transition:color .3s;
  word-break:break-word;
  font-size:15px;
  line-height:1.6;
}
.info-item span a:hover {color:#00bdfe;}

/* Your existing responsive rules (unchanged) */
@media (max-width:992px){
  .info-item{padding:25px;}
  .info-item i{font-size:26px;}
  .info-item h4{font-size:18px;}
  .info-item span a{font-size:14px;}
}
@media (max-width:576px){
  .contact-info-section{
    /* padding:60px 0; */
  }
  .info-item{padding:20px;}
  .info-item i{font-size:24px;}
  .info-item h4{font-size:17px;}
  .info-item span a{font-size:13px;}
}

/* ========================================
   NEW: MOBILE-FIRST RESPONSIVE (ADDED ONLY)
   → Forces 400px cards
   → One column on mobile
   → Centered & no scroll
======================================== */

/* Base mobile styles (≤767px) – ONE COLUMN */
@media (max-width: 767px) {
  .contact-info-section .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0 15px;
    margin-top: 20px;
  }

  .contact-info-section [class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 400px;
    padding: 0;
  }

  .info-item {
    width: 100% !important;
    max-width: 400px;
    margin: 0 auto;
    box-sizing: border-box;
  }
}

/* Extra small phones (≤400px) – Prevent overflow */
@media (max-width: 400px) {
  .info-item {
    max-width: 340px;
    padding: 18px;
  }
  .info-item i { font-size: 22px; }
  .info-item h4 { font-size: 16px; margin: 8px 0; }
  .info-item span a { font-size: 13px; }
}

/* Tablet & Desktop: Keep 400px cards, centered */
@media (min-width: 768px) {
  .contact-info-section .row {
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 30px;
  }

  .contact-info-section [class*="col-"] {
    flex: 0 0 400px;
    max-width: 400px;
  }

  .info-item {
    width: 400px;
  }
}


/* CONTACT FORM + MAP SECTION*/


.contact-form-section {
  margin-top: 50px;
}

.contact-form-section .row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* Left: Form */
.contact-form-section .col-lg-6:first-child {
  flex: 1;
  max-width: 50%;
}

.contact-form-section h2 {
  font-size: 32px;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
}

.contact-form-section p {
  font-size: 16px;
  color: #666;
  margin-bottom: 25px;
  line-height: 1.6;
}

/* Form Styling */
.contact-form-section form {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  width: 100%;
  margin-top: 40px;
}

.contact-form-section input,
.contact-form-section textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 30px;
  font-size: 15px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  min-width: 300px;
  margin-top: 10px;
}

.contact-form-section input:focus,
.contact-form-section textarea:focus {
  border-color: #00bdfe;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 189, 254, 0.3);
}

.contact-form-section textarea {
  min-height: 120px;
  min-width: 300px;
  /* resize: none; */
}

/* Submit Button */
#form-submit {
  background: #00bdfe;
  border: none;
  color: #fff;
  padding: 12px 25px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#form-submit:hover {
  background: #0097ca;
}

/* Right: Map */
.contact-form-section .col-lg-6:last-child {
  flex: 1;
  max-width: 50%;
}

.mapouter {
  position: relative;
  text-align: right;
  width: 100%;
  height: 100%;
 
}

.gmap_canvas iframe {
  width: 100%;
   height: 700px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  
}

/* ---------- Responsive ---------- */
/* Large desktop screens: make map a bit wider */
@media (min-width: 1200px) {
  .contact-form-section .col-lg-6:last-child {
    max-width: 55%; 
    margin-bottom: 60px;
  }

  .contact-form-section .col-lg-6:first-child {
    max-width: 45%;
  }
}
@media (max-width: 992px) {
  .contact-form-section .row {
    flex-wrap: wrap;
  }

  .contact-form-section .col-lg-6:first-child,
  .contact-form-section .col-lg-6:last-child {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .col-lg-6:last-child {
    margin-bottom: 40px;
  }
  .contact-form-section .col-lg-6:last-child {
   
    margin-bottom: 40px;
  }

  .gmap_canvas iframe {
    height: 520px;
  }
   .mapouter {
    margin-top: 40px;
  }
}

@media (max-width: 576px) {
  .contact-form-section h2 {
    font-size: 24px;
  }

  .contact-form-section p {
    font-size: 14px;
  }

  .contact-form-section form {
    padding: 25px;
  }

  #form-submit {
    width: 100%;
  }

  .gmap_canvas iframe {
    height: 430px ;
  }
}


/* =========================
   CAREER SECTION (Desktop Base)
========================= */
.career {
  margin-bottom: 60px;
}

.career .row {
  display: flex;
  flex-wrap: nowrap; /* Ensures items stay on one line on desktop */
  justify-content: space-between;
  gap: 10px;
  margin-top: 80px;
}

/* -------- Info Item (Standard Card) -------- */
.career .info-item {
  flex: 1;
  padding: 10px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  transition: all .5s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.career .info-itemcareer {
  flex: 1;
  padding: 10px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  transition: all .5s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.career .info-item i {
  font-size: 80px;
  margin-right: 10px;
  color: #00bdfe;
}

/* -------- Email Info Item (Special Card) -------- */
.career .emailinfo-item {
  flex: 1;
  padding: 30px 20px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  transition: all .5s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* justify-content: flex-start; */
  text-align: center;
  height: 100%;
  margin-right: 40px;
}

.career .emailinfo-item i {
  font-size: 80px;
  color: #00bdfe;
  margin-bottom: 10px;
}

.career .emailinfo-item h4 {
  font-size: 22px;
  font-weight: 600;
  color: #00bdfe;
  /* margin-bottom: 40px; */
  font-family: 'Times New Roman', Times, serif;
}

.career .emailinfo-item a {
    margin: 0 !important;     
    padding-right: 20px !important;
  display: block;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: rgba(0,0,0,0.8);
  text-decoration: none;
  /* word-break: break-word; */
  white-space: nowrap;

}

.career .emailinfo-item a:hover {
  color: #00bdfe;
}


/* -------- Paragraphs -------- */
.career .row p {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.633);
  text-align: left;
  margin-left: 30px;
  margin-top: 20px;
}

.career .info-itemcareer h4 {
  font-size: 22px;
  font-weight: 600;
  color: #00bdfe;
  margin-left:20px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.career .info-item h4 {
  font-size: 22px;
  font-weight: 600;
  color: #00bdfe;
 margin-bottom: 10px;
  margin-top: 20px;
}

.career .col-lg-4 {
  display: flex;
  flex: 0 0 31.5%; 
}
/* -------- Custom Icons (Diamond/Star) -------- */
.diamond {
  position: relative;
  padding-left: 30px;
  margin: 14px 0;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  font-weight: 500;
}
.diamond::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0;
  color: #00c2ff;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  margin-top: 2px;
}
.star {
  position: relative;
  padding-left: 30px;
  margin: 14px 0;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  font-weight: 500;
}
.star::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: #00c2ff;
  font-size: 18px;
  font-weight: bold;
}

/* =====================================
   RESPONSIVE DESIGN (Improved & Final)
===================================== */

/* Desktop-only fix for email card alignment */
@media (min-width: 1100px) {
  .career .emailinfo-item {
    display: flex;
    flex-direction: column;
    align-items: center;      
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 400px;  
  }

  .career .emailinfo-item a {
    margin-right: 0 !important; 
    display: block;
    text-align: center;
    word-break: break-word;
  }
    .career .info-item h4 {
    margin-left: 20px;
    margin-right: 70px ;
  }
}

/* ====== Large Tablets & Small Laptops (Max 1200px) ====== */
@media (max-width: 1200px) {
 
    .career .info-itemcareer,
  .career .info-item,
  .career .emailinfo-item {
    height: 100%;
    min-height: 380px;
  }
}

/* ====== Tablets (Max 992px) ====== */
@media (max-width: 992px) {
  .career .row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
  }

  .career .col-lg-4 {
    flex: 1 1 45%;
    display: flex;
    justify-content: center;
  }

  .career .info-item,
  .career .info-itemcareer {
    width: 100%;
  }

  .career .emailinfo-item {
    flex: 1 1 100%;
    margin-top: 15px;
    width: 100%;
  }

  .career .info-item h4,
  .career .info-itemcareer h4 {
    margin-right: 0;
    margin-left: 15px;
  }

  .career .row p {
    margin-left: 15px;
  }
}

/* ====== Mobile (Max 768px) ====== */
/* ====== Mobile (Max 768px) ====== */
@media (max-width: 768px) {

  .career .row {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  /* Each card full width */
  .career .col-lg-4,
  .career .info-item,
  .career .info-itemcareer,
  .career .emailinfo-item {
    width: 100%;
    margin: 0 auto;
  }

  /* Headings – left aligned but clean */
  .career .info-item h4,
  .career .info-itemcareer h4 {
    margin-left: 15px !important;
    margin-right: 0 !important;
    text-align: left;
  }

  /* Paragraph alignment */
  .career .row p {
    margin-left: 15px !important;
    margin-right: 15px;
    text-align: left;
  }

  /* Email card adjustments */
  .career .emailinfo-item {
    text-align: center;
    padding: 25px 20px;
    width: 100%;
  }

  .career .emailinfo-item a {
    font-size: 18px;
    margin-right: 0 !important;
    padding-right: 0 !important;
    white-space: normal; /* allows natural wrapping */
  }
}


/* ====== Extra Small Mobile (Max 480px) ====== */
@media (max-width: 480px) {
  .career .info-item,
  .career .info-itemcareer,
  .career .emailinfo-item {
    width: 100%;
    padding: 20px;
  }

  /* Headings – fix size + remove right margins */
  .career .info-item h4,
  .career .info-itemcareer h4 {
    font-size: 20px;
    margin-left: 10px !important;
    margin-right: 0 !important;
  }

  /* Paragraph */
  .career .row p {
    font-size: 14px;
    margin-left: 10px !important;
    margin-right: 10px;
  }

  /* Bullet list */
  .diamond,
  .star {
    padding-left: 24px;
  }

  .diamond::before,
  .star::before {
    font-size: 16px;
  }

  /* Email card */
  .career .emailinfo-item i {
    font-size: 60px;
  }

  .career .emailinfo-item h4 {
    font-size: 20px;
  }

  .career .emailinfo-item a {
    font-size: 15px;
    margin-right: 0 !important;
  }
}





/* Right Column: Center map vertically */
.col-lg-6.map-column {
  display: flex;
  align-items: center;   
  justify-content: center; 
}

.mapouter {
  width: 100%;
  max-width: 100%;
  height: 560px;  
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

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

.gmap_canvas iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
}






/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    display: none;
  }
  .testimonials .item .content {
    display: inline-block;
    text-align: center;
  }
  .testimonials .item .content .image {
    margin-top: 30px;
  }
  .testimonials .item .content .left-content {
    margin-right: 0px;
  }
  .featured-items .owl-nav .owl-next,
  .closed-contests .owl-nav .owl-next {
    right: -10px !important;
  }
  .featured-items .owl-nav .owl-prev,
  .closed-contests .owl-nav .owl-prev {
    left: -10px !important;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:first-child {
    padding-left: 15px !important;
  }
  .header-area .main-nav .nav li:last-child {
    padding-right: 15px !important;
  }
  .header-area .main-nav .nav li ul li:first-child {
    padding-left: 0px !important;
  }
  .header-area .main-nav .nav li ul li:last-child {
    padding-right: 0px !important;
  }
  .border-button a {
    font-size: 14px;
    padding: 10px 20px;
  }
  .header-area .main-nav .logo {
    margin-right: 5px;
  }
  .section-heading {
    text-align: center;
  }
  section.popular-categories .main-button {
    text-align: center;
    margin-top: -30px;
  }
  section.popular-categories .popular-item {
    margin-top: 30px;
  }
  .contest-win .contest-item {
    margin-bottom: 30px;
  }
  .contest-details .top-content {
    text-align: center;
  }
  .contest-details .top-content ul {
    text-align: center;
    margin-top: 30px;
  }
  .contest-details .top-content ul li:first-child {
    margin-left: 10px;
  }
  .contest-details .top-content ul li {
    margin: 0px 10px;
  }
  .contest-details .item {
    margin-bottom: 20px;
  }
  .contest-waiting .waiting-item {
    margin-bottom: 30px;
  }
  .top-categories .item,
  section.contact-us .info-item {
    margin-bottom: 15px;
  }
  section.popular-categories,
  .contest-win {
    padding: 0px;
  }
  .pricing-item {
    margin-bottom: 15px;
  }
  .featured-contests .item .hover-effect .content .info {
    display: flex !important;
  }
}

@media (max-width: 1200px) {
  .featured-items .owl-nav .owl-next,
  .closed-contests .owl-nav .owl-next {
    right: -25px;
  }
  .featured-items .owl-nav .owl-prev,
  .closed-contests .owl-nav .owl-prev {
    left: -25px;
  }
  .featured-contests .item .hover-effect .content .info {
    display: none;
  }
}


.redirect-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 50px;
      width: 95%;
      margin: 60px auto;
      /* margin-top: 200px; */
     padding: 30px 30px;
      background: white;
      border-radius: 12px;
      /* height: 500px; */
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .redirect-container img {
      width: 600px;
      border-radius: 12px;
    }
    .redirect-info {
      width: 50%;
    }
    .redirect-info h1 {
      font-size: 28px;
      margin-bottom: 15px;
      color: #333;
    }
    .redirect-info p {
      font-size: 16px;
      line-height: 1.6;
      color: #555;
      margin-bottom: 15px;
    }
    .redirect-info strong {
      color: #222;
    }
    .back-link {
      display: inline-block;
      margin-top: 20px;
      padding: 10px 15px;
      background: #007BFF;
      color: white;
      text-decoration: none;
      border-radius: 8px;
    }
    .back-link:hover { background: #a2a7ab; }

    /* Responsive */
    @media (max-width: 768px) {
      .redirect-container {
        flex-direction: column;
        text-align: center;
      }
      .redirect-container img, 
      .redirect-info {
        width: 100%;
      }
    }


/* About Us Section */
.about-section {
  padding: 60px 40px;
  background: #f9f9f9;
  width: 100%;   /* full width */
}

/* Full-width container */
.about-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  width: 100%;          /* full stretch */
  margin: 0;            /* remove side gaps */
  background: #fff;
  padding: 30px 30px;   /* inner spacing */
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Left image */
.about-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.about-image img {
  width: 600px;
  /* height: 320px; */
  object-fit: cover;
  border-radius: 12px;
}

/* Right content */
.about-content {
  flex: 1.2;
}

.about-content h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: #222;
  font-weight: 700;
}

.about-content p {
  font-size: 1.15rem;
  color: #555;
  line-height: 1.8;
  margin-bottom: 30px;
}

.view-btn {
  background-color: #0078d4;
  color: #fff;
  font-size: 16px;
  padding: 8px 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-btn:hover {
  background: #0056b3;
}

/* Responsive */
@media (max-width: 991px) {
  .about-container {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
  }

  .about-image img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
}

/* why choose us  */
.choose-section {
  background: #fff; /* clean white */
}

/* Section */
.core-choose {
  text-align: center;
  padding: 60px 0;
  background-color: #fff;
}

/* Heading */
.core-choose h3 {
  font-size: 42px;
  font-weight: 700;
  color: #0078d4;
  margin-bottom: 42px;
  /* text-transform: uppercase; */
  letter-spacing: 1px;
}

/* Single Card */
.choose-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  padding: 40px 30px;
  max-width: 900px;
  height: 200px;
  margin: 0 auto;
  transition: all 0.3s ease;
}

/* Hover Effect */
/* .choose-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 120, 212, 0.25);
} */

/* Card Heading */
.choose-card h4 {
  color: #0078d4;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
}

/* Card Text */
.choose-card p {
  font-size: 17px;
  color: #333;
  line-height: 28px;
  margin: 0;
}

/* ===== Additional Responsive Enhancements ===== */

/* Tablets (max-width: 992px) */
@media (max-width: 992px) {
  .core-choose {
    padding: 50px 20px;
  }

  .choose-card {
    max-width: 100%;
    height: auto;
    margin-bottom: 25px;
  }

  .choose-card h4 {
    font-size: 22px;
  }

  .choose-card p {
    font-size: 16px;
  }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
  .core-choose {
    padding: 40px 15px;
  }

  .core-choose h3 {
    font-size: 28px;
    margin-bottom: 25px;
  }

  .choose-card {
    width: 100%;
    padding: 25px 18px;
    height: auto;
  }

  .choose-card h4 {
    font-size: 20px;
  }

  .choose-card p {
    font-size: 15px;
    line-height: 24px;
  }
}

/* Small Phones (max-width: 480px) */
@media (max-width: 480px) {
  .core-choose h3 {
    font-size: 24px;
  }

  .choose-card {
    padding: 20px 15px;
  }

  .choose-card h4 {
    font-size: 18px;
  }

  .choose-card p {
    font-size: 14px;
  }
}


/* Section Styling */
.services-section {
  padding: 60px 40px;
  background-color: #fff;
}

/* Row Layout */
.services-section .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 35px;
}

/* Card Design */
.service-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  flex: 1 1 calc(33.333% - 25px); /* 3 cards per row */
  max-width: calc(33.333% - 25px);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Card Image */
.service-card img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

/* Card Content */
.service-content {
  padding: 20px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-content h4 {
  font-size: 18px;
  font-weight: 600;
  /* color: #00bdfe; */
  margin-bottom: 10px;
  min-height: 50px;
}

.service-content p {
  font-size: 14px;
  color: #555;
  margin-bottom: 15px;
  min-height: 60px;
  line-height: 22px;
}

.service-content a {
  font-size: 14px;
  color: #007bff;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.service-content a:hover {
  color: #0056b3;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .service-card {
    flex: 1 1 calc(50% - 25px); /* 2 cards per row on tablets */
    max-width: calc(50% - 25px);
  }
}

@media (max-width: 600px) {
  .service-card {
    flex: 1 1 100%; /* 1 card per row on mobile */
    max-width: 100%;
  }

  .service-content h4 {
    font-size: 16px;
  }

  .service-content p {
    font-size: 13px;
  }
}

/* mission-vision Section */
.mission-vision {
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 60px 8%; */
  padding: 40px;
  background-color: #fff;
  flex-wrap: wrap;
  gap: 40px;
}

/* Left Side */
.mission-vision-image {
  flex: 1;
  min-width: 320px;
  text-align: center;
}

.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper img {
  width: 100%;
  max-width: 550px;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  height: 400px;
}

.image-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #1e56a0;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 20px;
}

/* Right Side */
.mission-vision-content {
  flex: 1;
  min-width: 320px;
  padding-left: 20px;
}

.section-subtitle {
  color: #00bfff;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-title {
  font-size: 35px;
  color: #011a41;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 10px;
}

.section-description {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin-top: 10px;
}

/* Info Boxes */
.info-box {
  background-color: #f1fbff;
  border-radius: 10px;
  padding: 20px 25px;
  display: flex;
  align-items: center;
  margin-top: 25px;
  transition: all 0.3s ease;
}

.info-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.icon {
  background-color: #00bfff;
  color: #fff;
  font-size: 22px;
  border-radius: 50%;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.info-box h3 {
  font-size: 20px;
  color: #011a41;
  margin-bottom: 8px;
}

.info-box p {
  font-size: 15px;
  color: #555;
  margin: 0;
}

/* Button */
.read-more-btn {
  display: inline-block;
  background-color: #1e56a0;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 8px;
  margin-top: 30px;
  transition: background-color 0.3s ease;
}

.read-more-btn:hover {
  background-color: #00bfff;
}


/* Responsive Design */

/* Tablets and below (max-width: 768px) */
@media (max-width: 768px) {
  .mission-vision {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
    gap: 30px;
  }

  .mission-vision-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .mission-vision-content {
    padding-left: 0;
    margin-top: 10px;
  }

  .section-title {
    font-size: 26px;
  }

  .section-description {
    font-size: 15px;
  }

  .info-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px;
  }

  .icon {
    margin: 0 0 12px 0;
  }
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .mission-vision {
    padding: 20px 15px;
    gap: 20px;
  }

  .section-title {
    font-size: 24px;
  }

  .info-box {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .icon {
    margin: 0 0 10px 0;
  }

  .info-box h3 {
    margin: 5px 0;
    font-size: 18px;
  }

  .info-box p {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* Small Phones (max-width: 375px) */
@media (max-width: 375px) {
  .section-title {
    font-size: 22px;
  }

  .info-box {
    padding: 15px;
  }

  .icon {
    font-size: 18px;
    padding: 14px;
  }

  .info-box h3 {
    font-size: 17px;
  }

  .info-box p {
    font-size: 13px;
  }
}

/* Extra-Small (max-width: 320px) */
@media (max-width: 320px) {
  .mission-vision {
    padding: 15px 12px;
  }

  .section-title {
    font-size: 20px;
  }

  .info-box {
    padding: 12px;
  }

  .icon {
    font-size: 16px;
    padding: 12px;
  }

  .info-box h3 {
    font-size: 16px;
  }

  .info-box p {
    font-size: 12px;
  }
}




/* CORE VALUES SECTION */
.values-section {
  background-color: #f7f7f7;
  text-align: center;
  padding: 60px 40px;
}

.values-section h2 {
  font-size: 28px;
  color: #333;
  font-weight: 600;
  margin-bottom: 65px;
}

/* TIMELINE CONTAINER */
.values-timeline {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 80px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

/* Horizontal Line */
.values-timeline::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 100px; /* Adjust to start after first circle */
  right: 100px; /* Adjust to end before last circle */
  height: 2px;
  background-color: #3b82f6;
  z-index: 0;
}

.value-step {
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Circle Styling */
.circle {
  width: 55px;
  height: 55px;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  color: #3b82f6;
  margin: 0 auto 15px;
  font-size: 18px;
  transition: all 0.3s ease;
}

.circle:hover {
  background-color: #3b82f6;
  color: #fff;
  transform: scale(1.1);
}

.value-step h4 {
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

/* --------------------------- */
/* RESPONSIVENESS */
/* --------------------------- */

/* Large Screens */
@media (max-width: 1200px) {
  .values-timeline {
    gap: 60px;
  }
  .values-timeline::before {
    left: 80px;
    right: 80px;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .values-timeline {
    gap: 50px;
  }
  .values-timeline::before {
    left: 60px;
    right: 60px;
  }
  .circle {
    width: 50px;
    height: 50px;
  }
}

/* Mobiles - Vertical timeline */
@media (max-width: 768px) {
  .values-timeline {
    flex-direction: column;
    gap: 45px;
    align-items: center;
    position: relative;
  }

  /* Vertical connecting line (shortened to fit circles perfectly) */
  .values-timeline::before {
    content: "";
    position: absolute;
    width: 2px;
    height: calc(100% - 90px); /* leaves space above/below */
    top: 45px; /* starts below first circle */
    left: 50%;
    transform: translateX(-50%);
    background-color: #3b82f6;
    z-index: 0;
  }

  .circle {
    width: 50px;
    height: 50px;
  }

   .value-step h4 {
    font-size: 14px;
    margin-left: 90px;
  }
  .value-step .client{
    margin-left: 130px;
  }
  .value-step .integrity{
    margin-right:10px ;
  }
}

/* Small Mobiles */
@media (max-width: 480px) {
  .values-section {
    padding: 40px 20px;
  }

  .values-section h2 {
    font-size: 22px;
    margin-bottom: 40px;
  }

  .circle {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }

  .value-step h4 {
    font-size: 13px;
    margin-left: 100px;
  }
  .value-step .client{
    margin-left: 142px;
  }
  .value-step .integrity{
    margin-right:10px ;
  }

  .values-timeline {
    gap: 35px;
  }

  .values-timeline::before {
    height: calc(100% - 70px); /* keeps line cleanly between circles */
    top: 35px;
  }
}




/* Industries Section */
.industries-section {
  padding: 60px 40px;
  text-align: center;
}

.industries-header h4 {
  color: #333;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 1px;
  margin-bottom: 80px;
  text-transform: uppercase;
}

/* Container */
.industries-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

/* Card Styling */
.industry-card {
  background: #fff;
  border-radius: 15px;
  padding: 30px 20px;
  width: 280px;
  height: 240px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}

.industry-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Icon */
.industry-icon {
  background: #00c4f4;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
}

.industry-icon i {
  color: #fff;
  font-size: 32px;
}

.industry-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #002b5c;
  margin-top: 35px;
}

/* ---------- RESPONSIVE ONLY (alignment preserved) ---------- */

/* Large Desktop */
@media (max-width: 1400px) {
  .industries-container {
    gap: 25px;
  }
  .industry-card {
    width: 260px;
    height: 230px;
  }
}

/* Laptops */
@media (max-width: 1200px) {
  .industry-card {
    width: 240px;
    height: 220px;
  }
}

/* Tablets */
@media (max-width: 992px) {
  .industries-container {
    justify-content: center;
    gap: 25px;
  }
  .industry-card {
    width: 45%;
    height: 220px;
  }
  .industry-icon {
    width: 70px;
    height: 70px;
  }
  .industry-icon i {
    font-size: 28px;
  }
}

/* Mobiles */
@media (max-width: 768px) {
  .industries-header h4 {
    font-size: 24px;
    margin-bottom: 50px;
  }
  .industry-card {
    width: 70%;
    height: 210px;
  }
}

/* Small Mobiles */
@media (max-width: 576px) {
  .industry-card {
    width: 90%;
    height: 200px;
  }
  .industry-icon {
    width: 65px;
    height: 65px;
  }
  .industry-icon i {
    font-size: 24px;
  }
  .industry-card h3 {
    font-size: 16px;
  }
}
/* Desktop (5 cards in one row) */
@media (min-width: 1201px) {
  .industries-container {
    flex-wrap: nowrap; /* prevents wrapping */
    justify-content: space-between; /* spreads evenly */
    gap: 25px;
  }

  .industry-card {
    flex: 1; /* make all cards equal width */
    max-width: 250px; /* control card width */
  }
}



/* ------------------------------
   OUR COMMITMENT SECTION
------------------------------ */
.commitment-section {
  background-color: #f7f7f7;
  text-align: center;
  padding: 80px 40px;
}

/* BIG CARD CONTAINER */
.commitment-cardbox {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  width: 95%;
  margin: 0 auto;
  padding: 60px 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 50px;
}

/* HEADING INSIDE CARD */
.commitment-cardbox h2 {
  width: 100%;
  font-size: 32px;
 color: #333;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}

/* INDIVIDUAL ITEMS */
.commitment-item {
  flex: 1 1 250px;
  text-align: center;
  max-width: 380px;
}

.commitment-item i {
  font-size: 48px;
  color: #00c4f4;
  background-color: #e8f3f3;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  transition: all 0.3s ease;
}

.commitment-item:hover i {
  background-color:#00c4f4;
  color: #fff;
  transform: scale(1.1);
}

/* TITLE */
.commitment-item h4 {
  font-size: 18px;
  color: #003d3d;
  font-weight: 600;
  margin-bottom: 12px;
}

/* DESCRIPTION */
.commitment-item p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* ------------------------------
   RESPONSIVENESS
------------------------------ */

/* Tablets */
@media (max-width: 992px) {
  .commitment-cardbox {
    padding: 50px 30px;
    gap: 40px;
  }

  .commitment-item {
    flex: 1 1 45%;
  }

  .commitment-item i {
    width: 75px;
    height: 75px;
    font-size: 38px;
  }
}

/* Mobiles */
@media (max-width: 600px) {
  .commitment-section {
    padding: 60px 20px;
  }

  .commitment-cardbox {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 40px 20px;
  }

  .commitment-cardbox h2 {
    font-size: 26px;
    margin-bottom: 30px;
  }

  .commitment-item i {
    width: 65px;
    height: 65px;
    font-size: 28px;
  }

  .commitment-item h4 {
    font-size: 16px;
  }

  .commitment-item p {
    font-size: 13px;
  }
}

/* hardware product css */

/* Product Section */
.product-showcase {
  padding: 80px 0;
  background-color: #f8f9fa;
}

/* Grid layout */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
  gap: 40px;
  justify-content: center;
}

/* Hardware Product Card */
.hardwareproduct-card {
  position: relative;
  display: block;             /* makes entire card clickable */
  width: 550px;               /* fixed width */
  height: 380px;              /* fixed height */
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  text-decoration: none;      /* remove underline */
  color: inherit;
  transition: transform 0.3s ease;
  margin: auto;
  cursor: pointer;
}

.hardwareproduct-card:hover {
  transform: translateY(-10px);
}

/* Card Image */
.hardwareproduct-card img {
  width: 100%;               /* full width */
  height: 300px;             /* fixed height */
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Card Content */
.card-content {
  padding: 20px;
  position: relative;
  z-index: 5;
}

.card-content h4 {
  font-size: 22px;
  color: #333;
  font-weight: 600;
  text-align: center;
}

/* Arrow Styling */
.arrow-link1 {
  position: absolute;
  top: 15px;
  right: 15px;
  /* background: #00bdfe; */
  color: #fff;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;              /* stay on top of card */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 2px solid #fff;
}

.arrow-link1:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
   background: #fff;
  color: #000;
}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 991px) {
  .product-grid {
    grid-template-columns: 1fr; /* single card per row */
    justify-content: center;
    gap: 30px;
  }

  .hardwareproduct-card {
    width: 90%;       /* maintain fixed look on smaller screens */
    height: 380px;    /* same height */
  }

  .hardwareproduct-card img {
    height: 300px;
  }
}

@media (max-width: 576px) {
  .hardwareproduct-card {
    width: 100%;      /* full width on mobile */
    height: 380px;
  }

  .hardwareproduct-card img {
    height: 280px;
  }

  .card-content h4 {
    font-size: 20px;
  }

  .arrow-link1 {
    width: 38px;
    height: 38px;
  }
}

/* Breadcrumbs under title */
.banner-breadcrumbs {
  margin-top: 100px;
  margin-left: 550px;
  font-size: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  text-align: center;
  gap: 8px;
  font-weight: 500;
  position: relative;
  z-index: 20;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7); 
}

.banner-breadcrumbs a {
  color: #fff;
  text-decoration: none;
}

.banner-breadcrumbs span {
  color: #eee;
}


/* Responsive */
@media (max-width: 768px) {
  .banner-breadcrumbs {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .banner-breadcrumbs {
    font-size: 13px;
    flex-wrap: wrap;
  }
}





/* network products css */


/* ===============================
   🔹 NETWORK SECTION
=============================== */
.network-section {
  padding: 80px 0;
  background: #f4f7fb;
}

.network-container {
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
}

.network-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #222;
  margin-bottom: 50px;
}

/* ===============================
   🔹 GRID LAYOUT (Default: 4 Columns)
=============================== */
.network-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  justify-items: center;
  align-items: start;
}

/* ===============================
   🔹 CARD DESIGN
=============================== */
.network-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 280px;
  cursor: pointer;
}

.network-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.network-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  /* border-bottom: 2px solid #eee; */
}

.network-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 15px 0;
  padding: 0 10px;
}

/* ===============================
   🔹 ROW 3 (2 Cards Left-Aligned)
=============================== */
.network-grid > :nth-child(9)  { grid-column: 1; }
.network-grid > :nth-child(10) { grid-column: 2; }

/* ===============================
   🔹 RESPONSIVE DESIGN
=============================== */

/* 📱 Large Tablets (max-width: 1200px) */
@media (max-width: 1200px) {
  .network-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .network-card {
    max-width: 260px;
  }
}

/* 📱 Tablets (max-width: 991px) */
@media (max-width: 991px) {
  .network-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Align last 2 cards properly */
  .network-grid > :nth-child(9),
  .network-grid > :nth-child(10) {
    grid-column: auto;
  }

  .network-card img {
    height: 160px;
  }
}

/* 📱 Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
  .network-section {
    padding: 60px 0;
  }

  .network-title {
    font-size: 26px;
    margin-bottom: 30px;
  }

  .network-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
  }

  .network-card {
    max-width: 90%;
  }

  .network-card img {
    height: 150px;
  }

  .network-name {
    font-size: 16px;
  }
}

/* 📱 Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .network-card {
    max-width: 100%;
  }

  .network-card img {
    height: 140px;
  }

  .network-name {
    font-size: 15px;
  }
}




/* computing products css */


.computing-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #f9fafc 0%, #eef2f7 100%);
}

.computing-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.computing-title {
  font-size: 36px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 50px;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
}

.computing-title::after {
  content: '';
  width: 80px;
  height: 4px;
  background: #00c2ff;
  display: block;
  margin: 15px auto;
  border-radius: 2px;
}

/* GRID: 4 COLUMNS + LAST 3 CENTERED */
.computing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
  justify-items: center;
  padding: 0 20px;
}
/* CARD STYLE */
.computing-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  text-align: center;
  width: 100%;
  max-width: 300px;
}

.computing-card:hover {
  transform: translateY(-12px);
  /* box-shadow: 0 20px 40px rgba(0, 192, 255, 0.2); */
  /* border: 1px solid rgba(0, 194, 255, 0.3); */
}

.computing-card img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  /* padding: 20px; */
  background: #f8fbff;
  transition: transform 0.3s ease;
}

.computing-card:hover img {
  transform: scale(1.08);
}

.computing-name {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin: 18px 0 10px;
  padding: 0 15px;
}

/* ROW 3 — 3 CARDS LEFT-ALIGNED (LIKE ROW 1 & 2) */
.computing-grid > :nth-child(9)  { grid-column: 1; }
.computing-grid > :nth-child(10) { grid-column: 2; }
.computing-grid > :nth-child(11) { grid-column: 3; }

/* TABLET */
@media (max-width: 992px) {
  .computing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  .computing-grid > :nth-child(9),
  .computing-grid > :nth-child(10),
  .computing-grid > :nth-child(11) {
    grid-column: auto;
  }
}

/* MOBILE */
@media (max-width: 576px) {
  .computing-grid {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 0 15px;
  }
  .computing-title {
    font-size: 28px;
  }
  .computing-card img {
    height: 140px;
  }
}



/* security products css */
.security-section {
  padding: 80px 0;
  background: #f4f7fb;
}

.security-container {
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  justify-items: center;
}

.security-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 280px;
  cursor: pointer;
}

.security-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.security-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  /* border-bottom: 1px solid #dadadb; */
}

.security-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 15px 0;
}

/* Last row centered */
.security-row-center {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 40px;
  flex-wrap: wrap; /* wrap on smaller screens */
}

/* Responsive Design */
@media (max-width: 991px) {
  .security-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .security-grid {
    grid-template-columns: 1fr;
  }

  .security-card {
    max-width: 100%;
  }

  .security-row-center {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

/* specialized products css */
.specialized-section {
  padding: 80px 0;
  background: #f4f7fb;
}

.specialized-container {
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
}

.specialized-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards per row */
  gap: 25px;
  justify-items: center;
}

.specialized-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 340px;
  cursor: pointer;
}

.specialized-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.specialized-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  /* border-bottom: 1px solid #dadadb; */
}

.specialized-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 15px 0;
}

/* Responsive Design */
@media (max-width: 991px) {
  .specialized-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 cards per row on tablets */
  }
}

@media (max-width: 576px) {
  .specialized-grid {
    grid-template-columns: 1fr; /* 1 card per row on mobile */
  }

  .specialized-card {
    max-width: 100%;
  }
}



/* -------------------------------------------------
       Software Product Section (mirrors hardware style)
       ------------------------------------------------- */
    .software-showcase {
      padding: 80px 0;
      background-color: #f8f9fa;
    }

    /* Grid – 2 cards on desktop, 1 on tablet/mobile */
    .software-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      justify-content: center;
    }

    /* Software Card – identical dimensions & effects */
    .software-card {
      position: relative;
      display: block;
      width: 550px;
      height: 380px;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
      text-decoration: none;
      color: inherit;
      transition: transform 0.3s ease;
      margin: auto;
      cursor: pointer;
    }

    .software-card:hover {
      transform: translateY(-10px);
    }

    .software-card img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }

    .software-card .card-content {
      padding: 20px;
      text-align: center;
    }

    .software-card .card-content h4 {
      font-size: 22px;
      color: #333;
      font-weight: 600;
      margin: 0;
    }

    /* Arrow – same as hardware */
    .arrow-link1 {
      position: absolute;
      top: 15px;
      right: 15px;
      color: #fff;
      border: 2px solid #fff;
      border-radius: 50%;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: all 0.3s ease;
    }

    .arrow-link1:hover {
      transform: scale(1.1);
      background: #fff;
      color: #000;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    /* -------------------------------------------------
       Responsive
       ------------------------------------------------- */
    @media (max-width: 991px) {
      .software-grid {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      .software-card {
        width: 90%;
        height: 380px;
      }
      .software-card img { height: 300px; }
    }

    @media (max-width: 576px) {
      .software-card {
        width: 100%;
        height: 380px;
      }
      .software-card img { height: 280px; }
      .software-card .card-content h4 { font-size: 20px; }
      .arrow-link1 { width: 38px; height: 38px; }
    }


    
/* operating system */

.os-section {
  padding: 100px 0;
  /* background: #f8f9fa; */
}

.os-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Center cards */
.os-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  flex-wrap: wrap;
}

/* Full-image card */
.os-card {
  position: relative;
  width: 580px;
  height: 450px;
  border-radius: 25px;
  overflow: hidden; /* ensures image and corners are clean */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  background: none; /* remove any white background */
}

.os-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
}

/* Image completely fills card, rounded with card */
.os-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;  /* follow same rounded corners */
  display: block;
  border: 1px solid transparent;
}

/* Name bar */
.os-card .os-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 12px 0;
  font-size: 20px;
  font-weight: 700;
  color: #111;
  margin: 0;
  text-align: center;
  backdrop-filter: blur(4px);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

/* Responsive */
@media (max-width: 992px) {
  .os-card {
    width: 360px;
    height: 340px;
  }
}

@media (max-width: 576px) {
  .os-grid {
    flex-direction: column;
    gap: 50px;
  }
  .os-card {
    width: 90%;
    height: 320px;
  }
}


/* securitysoftware page */

.se-section {
  padding: 60px 0;
  background-color: #f8f9fa;
}

.se-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.se-heading {
  text-align: center;
  font-size: 28px;
  color: #333;
  margin-bottom: 40px;
  font-weight: 600;
}

.se-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin-top: 30px;
}

.se-card {
  flex: 1 1 calc(33.333% - 25px);
  max-width: calc(33.333% - 25px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.se-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.se-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.se-name {
  font-size: 20px;
  color: #222;
  padding: 15px 0;
}

/* Responsive */
@media (max-width: 992px) {
  .se-card {
    flex: 1 1 calc(45% - 20px);
    max-width: calc(45% - 20px);
  }
}

@media (max-width: 600px) {
  .se-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}


/* virtualsoftware */

.virtual-section {
  padding: 100px 0;
  background-color: #f8f9fa;
}

.virtual-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.virtual-heading {
  text-align: center;
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
  font-weight: 600;
}

.virtual-subtext {
  text-align: center;
  font-size: 16px;
  color: #555;
  margin-bottom: 40px;
}

.virtual-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}

.virtual-card {
  flex: 1 1 calc(33% - 25px);
  max-width: calc(40% - 25px);
  /* max-width: 500px; */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.virtual-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.virtual-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.virtual-name {
  font-size: 18px;
  color: #222;
  padding: 15px 0;
}

/* Responsive */
@media (max-width: 992px) {
  .virtual-card {
    flex: 1 1 calc(45% - 20px);
    max-width: calc(45% - 20px);
  }
}

@media (max-width: 600px) {
  .virtual-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}