/* =========================================================
   SHRIKANT ENTERPRISES
   DESKTOP WEBSITE
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');


/* =========================================================
   ROOT
========================================================= */

:root {

  --dark: #111820;
  --dark-2: #17212b;

  --blue: #1769aa;
  --blue-light: #2d8bd0;
  --cyan: #3bb5d9;

  --white: #ffffff;
  --light: #f4f7f9;

  --text: #5e6872;
  --border: #dce3e8;

  --heading-font: "Space Grotesk", sans-serif;
  --body-font: "DM Sans", sans-serif;

  --container: 1180px;

}


/* =========================================================
   RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  font-family: var(--body-font);

  color: var(--dark);

  background: var(--white);

  overflow-x: hidden;

}


a {
  text-decoration: none;
  color: inherit;
}


img {
  max-width: 100%;
}


button,
input,
textarea,
select {
  font-family: inherit;
}


.container {

  width: min(
    var(--container),
    calc(100% - 80px)
  );

  margin: 0 auto;

}


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

.site-header {

  height: 86px;

  background:
    rgba(255,255,255,0.98);

  border-bottom:
    1px solid #e7ebee;

  position: sticky;

  top: 0;

  z-index: 1000;

}


.nav-wrapper {

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.logo img {

  width: 175px;

  height: auto;

  display: block;

}


.navigation {

  display: flex;

  align-items: center;

  gap: 40px;

}


.navigation a {

  font-size: 14px;

  font-weight: 600;

  color: #35414c;

  transition: 0.25s ease;

}


.navigation a:hover {

  color: var(--blue);

}


/* =========================================================
   HERO
========================================================= */

.hero {

  min-height: 680px;

  position: relative;

  display: flex;

  align-items: center;

  background:

    linear-gradient(
      90deg,
      rgba(9,18,27,0.97) 0%,
      rgba(12,28,40,0.92) 55%,
      rgba(18,50,70,0.78) 100%
    ),

    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1800&q=85");

  background-size: cover;

  background-position: center;

  color: white;

}


.hero-overlay {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(
      circle at 80% 40%,
      rgba(45,139,208,0.23),
      transparent 35%
    );

}


.hero-content {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    1.25fr
    0.75fr;

  gap: 100px;

  align-items: center;

}


/* HERO LOGO */

.hero-brand {

  margin-bottom: 20px;

}


.hero-brand img {

  width: 235px;

  height: auto;

  filter:
    drop-shadow(
      0 8px 20px
      rgba(0,0,0,0.25)
    );

}


.eyebrow,
.section-label {

  font-size: 11px;

  letter-spacing: 3px;

  font-weight: 700;

  color: var(--blue-light);

  display: inline-block;

  margin-bottom: 22px;

}


.hero h1 {

  font-family: var(--heading-font);

  font-size: 70px;

  line-height: 1.02;

  letter-spacing: -3px;

  max-width: 720px;

  margin-bottom: 28px;

}


.hero h1 span {

  display: block;

  color: #68c9ed;

}


.hero-text > p {

  font-size: 18px;

  line-height: 1.8;

  color: #d1dce3;

  max-width: 600px;

  margin-bottom: 38px;

}


.hero-buttons {

  display: flex;

  gap: 15px;

}


.primary-button,
.secondary-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 15px 27px;

  font-size: 13px;

  font-weight: 700;

  transition: 0.3s ease;

}


.primary-button {

  background: var(--blue);

  color: white;

}


.primary-button:hover {

  background: var(--blue-light);

  transform: translateY(-2px);

}


.secondary-button {

  border:
    1px solid
    rgba(255,255,255,0.35);

  color: white;

}


.secondary-button:hover {

  background: white;

  color: var(--dark);

}


/* HERO CARD */

.hero-card {

  padding: 42px;

  border:
    1px solid
    rgba(255,255,255,0.18);

  background:
    rgba(255,255,255,0.07);

  backdrop-filter: blur(8px);

}


.hero-card-logo {

  margin-bottom: 22px;

}


.hero-card-logo img {

  width: 145px;

  filter:
    drop-shadow(
      0 5px 15px
      rgba(0,0,0,0.25)
    );

}


.hero-card-icon {

  width: 55px;

  height: 55px;

  border:
    1px solid
    rgba(104,201,237,0.6);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  color: #68c9ed;

  margin-bottom: 25px;

}


.hero-card h3 {

  font-family: var(--heading-font);

  font-size: 26px;

  line-height: 1.2;

  margin-bottom: 18px;

}


.hero-card p {

  color: #c4d0d8;

  line-height: 1.7;

  font-size: 14px;

}


.hero-card-line {

  height: 1px;

  background:
    rgba(255,255,255,0.15);

  margin: 30px 0 18px;

}


.hero-card > span {

  font-size: 10px;

  letter-spacing: 2px;

  color: #68c9ed;

}


/* =========================================================
   ABOUT
========================================================= */

.about-section {

  padding: 120px 0;

  background: white;

}


.about-grid {

  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  gap: 110px;

  align-items: center;

}


.about-image {

  position: relative;

  min-height: 500px;

}


.image-frame {

  width: 90%;

  height: 470px;

  background:
    linear-gradient(
      145deg,
      #dcecf4,
      #b9d1de
    );

  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}


.image-frame::after {

  content: "";

  position: absolute;

  width: 360px;

  height: 360px;

  border-radius: 50%;

  border:
    1px solid
    rgba(23,105,170,0.25);

}


.image-frame img {

  width: 235px;

  position: relative;

  z-index: 2;

}


.image-frame-text {

  position: relative;

  z-index: 2;

  margin-top: 20px;

  font-size: 10px;

  letter-spacing: 4px;

  font-weight: 700;

  color: #344a58;

}


.image-frame-text span {

  color: var(--blue);

}


.experience-badge {

  position: absolute;

  right: 0;

  bottom: 25px;

  width: 165px;

  height: 145px;

  background: var(--dark);

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

}


.experience-badge strong {

  font-family: var(--heading-font);

  font-size: 42px;

  color: #67c6e8;

}


.experience-badge span {

  font-size: 10px;

  line-height: 1.5;

  text-transform: uppercase;

  letter-spacing: 1px;

}


.about-content h2,
.section-heading h2,
.products-intro h2,
.software-content h2,
.showcase-main h2,
.contact-information h2 {

  font-family: var(--heading-font);

  font-size: 52px;

  line-height: 1.08;

  letter-spacing: -2px;

  margin-bottom: 28px;

}


.about-content h2 span,
.section-heading h2 span,
.products-intro h2 span,
.software-content h2 span,
.showcase-main h2 span,
.contact-information h2 span {

  color: var(--blue);

  display: block;

}


.large-text {

  font-size: 18px;

  line-height: 1.75;

  color: #38444e;

  margin-bottom: 20px;

}


.about-content > p:not(.large-text) {

  font-size: 14px;

  line-height: 1.8;

  color: var(--text);

}


/* SMALL ABOUT LOGO */

.about-logo-small {

  margin-top: 30px;

}


.about-logo-small img {

  width: 135px;

  opacity: 0.8;

}


.about-points {

  margin-top: 30px;

  display: grid;

  gap: 20px;

}


.about-point {

  display: flex;

  gap: 20px;

  border-top:
    1px solid
    var(--border);

  padding-top: 20px;

}


.about-point > span {

  color: var(--blue);

  font-family: var(--heading-font);

  font-weight: 700;

}


.about-point h4 {

  margin-bottom: 5px;

  font-size: 15px;

}


.about-point p {

  color: var(--text);

  font-size: 13px;

}


/* =========================================================
   WHY US
========================================================= */

.why-section {

  padding: 110px 0;

  background: var(--light);

}


.centered {

  text-align: center;

  max-width: 760px;

  margin: 0 auto 60px;

}


.centered h2 span {

  display: inline;

}


.section-heading > p {

  color: var(--text);

  font-size: 15px;

  line-height: 1.8;

}


.section-logo {

  margin-bottom: 20px;

}


.section-logo img {

  width: 125px;

}


.feature-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;

}


.feature-card {

  padding: 38px 30px;

  background: white;

  min-height: 300px;

  position: relative;

  border:
    1px solid
    #e2e7ea;

  transition: 0.3s ease;

}


.feature-card:hover {

  transform: translateY(-6px);

  box-shadow:
    0 18px 40px
    rgba(17,24,32,0.08);

}


.feature-card.featured {

  background: var(--dark);

  color: white;

}


.feature-number {

  position: absolute;

  top: 24px;

  right: 25px;

  color: #aab5bd;

  font-size: 11px;

  font-weight: 700;

}


.featured .feature-number {

  color: #6598b5;

}


.feature-icon {

  width: 52px;

  height: 52px;

  border:
    1px solid
    #d5e0e6;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--blue);

  font-size: 20px;

  margin-bottom: 45px;

}


.featured .feature-icon {

  border-color: #395362;

  color: #68c9ed;

}


.feature-card h3 {

  font-family: var(--heading-font);

  font-size: 19px;

  margin-bottom: 13px;

}


.feature-card p {

  color: var(--text);

  font-size: 13px;

  line-height: 1.7;

}


.featured p {

  color: #bdc9d1;

}


/* FEATURE LOGO */

.feature-logo {

  position: absolute;

  bottom: 20px;

  right: 20px;

  width: 75px;

  opacity: 0.35;

}


/* =========================================================
   PRODUCTS
========================================================= */

.products-section {

  padding: 120px 0;

  background: white;

}


.products-intro {

  display: grid;

  grid-template-columns:
    1fr
    150px
    1fr;

  align-items: center;

  gap: 40px;

  margin-bottom: 55px;

}


.products-intro > p {

  max-width: 380px;

  justify-self: end;

  color: var(--text);

  font-size: 14px;

  line-height: 1.8;

}


.products-logo {

  text-align: center;

}


.products-logo img {

  width: 130px;

}


.product-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;

}


.product-card {

  background: #ffffff;

  border:
    1px solid
    var(--border);

  min-height: 465px;

  overflow: hidden;

  position: relative;

  transition: 0.3s ease;

}


.product-card:hover {

  border-color: var(--blue-light);

  transform: translateY(-6px);

  box-shadow:
    0 18px 40px
    rgba(17,24,32,0.10);

}


/* PRODUCT IMAGE */

.product-image {

  width: 100%;

  height: 205px;

  position: relative;

  overflow: hidden;

  background: #eef3f6;

}


.product-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition:
    transform 0.5s ease;

}


.product-card:hover
.product-image img {

  transform: scale(1.06);

}


.product-number {

  position: absolute;

  top: 15px;

  right: 15px;

  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    rgba(17,24,32,0.88);

  color: white;

  font-size: 10px;

  font-weight: 700;

  font-family: var(--heading-font);

}


/* PRODUCT CONTENT */

.product-card-content {

  padding:
    20px
    28px
    30px;

}


.product-mini-logo {

  margin-bottom: 8px;

}


.product-mini-logo img {

  width: 70px;

  height: auto;

}


.product-card-content h3 {

  font-family: var(--heading-font);

  font-size: 20px;

  margin-bottom: 12px;

  color: var(--dark);

}


.product-card-content p {

  color: var(--text);

  font-size: 13px;

  line-height: 1.7;

  margin-bottom: 22px;

}


.product-card-content a {

  font-size: 12px;

  color: var(--blue);

  font-weight: 700;

  transition: 0.25s ease;

}


.product-card-content a:hover {

  color: var(--blue-light);

  padding-left: 4px;

}


/* =========================================================
   SOFTWARE
========================================================= */

.software-section {

  padding: 120px 0;

  background: var(--dark);

  color: white;

}


.software-grid {

  display: grid;

  grid-template-columns:
    1fr
    0.9fr;

  gap: 100px;

  align-items: center;

}


.software-content h2 {

  color: white;

}


.software-content > p {

  color: #bac7cf;

  font-size: 15px;

  line-height: 1.8;

  max-width: 570px;

}


.software-list {

  margin-top: 40px;

}


.software-item {

  display: flex;

  gap: 22px;

  padding: 22px 0;

  border-top:
    1px solid
    #30404b;

}


.software-item > span {

  color: #63c4e7;

  font-size: 12px;

  font-weight: 700;

}


.software-item h4 {

  font-size: 15px;

  margin-bottom: 6px;

}


.software-item p {

  color: #9eabb3;

  font-size: 13px;

}


.technology-panel {

  height: 500px;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

}


/* SOFTWARE LOGO */

.software-logo {

  position: absolute;

  top: 10px;

  left: 50%;

  transform:
    translateX(-50%);

  width: 150px;

  z-index: 10;

}


/* CIRCLES */

.tech-circle {

  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    #35505e;

}


.circle-one {

  width: 420px;

  height: 420px;

}


.circle-two {

  width: 285px;

  height: 285px;

}


/* CENTER */

.tech-center {

  width: 170px;

  height: 170px;

  border-radius: 50%;

  background: #1d303d;

  border:
    1px solid
    #476575;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  position: relative;

  z-index: 3;

}


.tech-logo {

  font-family: var(--heading-font);

  font-size: 42px;

  font-weight: 700;

  color: #67c7e9;

}


.tech-center span {

  font-size: 9px;

  letter-spacing: 3px;

  color: #a5b5be;

}


.tech-center strong {

  font-size: 11px;

  letter-spacing: 1px;

}


.tech-label {

  position: absolute;

  padding:
    9px
    16px;

  background: #1d303d;

  border:
    1px solid
    #395361;

  font-size: 11px;

  letter-spacing: 1px;

  color: #b9cbd4;

  z-index: 5;

}


.label-one {

  top: 120px;

  left: 20px;

}


.label-two {

  top: 175px;

  right: 10px;

}


.label-three {

  bottom: 90px;

  left: 70px;

}


/* =========================================================
   GALLERY
========================================================= */

.gallery-section {

  padding: 120px 0;

  background: var(--light);

}


.gallery-grid {

  display: grid;

  grid-template-columns:
    1.3fr
    0.7fr
    0.7fr;

  grid-template-rows:
    230px
    230px;

  gap: 15px;

}


.gallery-item {

  overflow: hidden;

}


.gallery-large {

  grid-row:
    span 2;

}


.gallery-wide {

  grid-column:
    span 2;

}


.gallery-placeholder {

  height: 100%;

  width: 100%;

  position: relative;

  overflow: hidden;

}


.gallery-placeholder img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition:
    transform 0.5s ease;

}


.gallery-placeholder:hover img {

  transform:
    scale(1.06);

}


.gallery-overlay {

  position: absolute;

  inset: auto 0 0 0;

  padding: 25px;

  display: flex;

  justify-content: space-between;

  align-items: end;

  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,0.8)
    );

  color: white;

}


.gallery-overlay span {

  font-size: 11px;

  letter-spacing: 2px;

  font-weight: 700;

}


.gallery-overlay strong {

  font-family: var(--heading-font);

  font-size: 13px;

}


.gallery-brand {

  background:
    linear-gradient(
      135deg,
      #142530,
      #24495b
    );

  display: flex;

  justify-content: center;

  align-items: center;

}


.gallery-brand img {

  width: 200px;

  height: auto;

  object-fit: contain;

}


.gallery-brand-text {

  position: absolute;

  right: 45px;

  top: 50%;

  transform:
    translateY(-50%);

  color: white;

}


.gallery-brand-text span {

  display: block;

  font-size: 10px;

  letter-spacing: 3px;

  color: #6bc9e9;

  margin-bottom: 8px;

}


.gallery-brand-text strong {

  font-family: var(--heading-font);

  font-size: 20px;

}


/* =========================================================
   SHOWCASE
========================================================= */

.showcase-section {

  padding: 110px 0;

  background: white;

}


.showcase-grid {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 80px;

  align-items: center;

}


.showcase-logo {

  width: 150px;

  margin-bottom: 20px;

}


.showcase-main > p {

  max-width: 600px;

  color: var(--text);

  line-height: 1.8;

  margin-bottom: 35px;

}


.showcase-stat {

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  border-top:
    1px solid
    var(--border);

  border-left:
    1px solid
    var(--border);

}


.stat-box {

  min-height: 170px;

  border-right:
    1px solid
    var(--border);

  border-bottom:
    1px solid
    var(--border);

  padding: 28px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}


.stat-box strong {

  font-family: var(--heading-font);

  font-size: 42px;

  color: var(--blue);

}


.stat-box span {

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 1px;

  line-height: 1.5;

  color: var(--text);

}


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

.contact-section {

  padding: 120px 0;

  background: var(--light);

}


.contact-grid {

  display: grid;

  grid-template-columns:
    0.8fr
    1.2fr;

  gap: 90px;

  align-items: center;

}


.contact-logo {

  width: 180px;

  margin-bottom: 25px;

}


.contact-information > p {

  max-width: 480px;

  color: var(--text);

  line-height: 1.8;

  font-size: 14px;

  margin-bottom: 45px;

}


.contact-details {

  display: grid;

  gap: 25px;

}


.contact-detail {

  display: flex;

  gap: 18px;

  align-items: flex-start;

}


.contact-icon {

  width: 45px;

  height: 45px;

  display: flex;

  justify-content: center;

  align-items: center;

  background: white;

  color: var(--blue);

  font-weight: 700;

}


.contact-detail span {

  display: block;

  font-size: 9px;

  letter-spacing: 2px;

  font-weight: 700;

  color: #8a969e;

  margin-bottom: 7px;

}


.contact-detail p {

  font-size: 13px;

  line-height: 1.6;

  color: #34414a;

}


/* CONTACT BRAND PANEL */

.contact-brand-panel {

  min-height: 420px;

  background: var(--dark);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 60px;

  position: relative;

  overflow: hidden;

}


.contact-brand-panel::before {

  content: "";

  position: absolute;

  width: 400px;

  height: 400px;

  border-radius: 50%;

  border:
    1px solid
    rgba(104,201,237,0.18);

}


.contact-brand-panel img {

  width: 240px;

  position: relative;

  z-index: 2;

  margin-bottom: 30px;

}


.contact-brand-line {

  width: 60px;

  height: 2px;

  background: var(--cyan);

  margin-bottom: 25px;

  position: relative;

  z-index: 2;

}


.contact-brand-panel h3 {

  font-family: var(--heading-font);

  color: white;

  font-size: 28px;

  position: relative;

  z-index: 2;

}


.contact-brand-panel h4 {

  color: #67c7e9;

  font-size: 11px;

  letter-spacing: 2px;

  margin-top: 10px;

  position: relative;

  z-index: 2;

}


.contact-brand-panel p {

  color: #aebbc3;

  font-size: 13px;

  max-width: 400px;

  line-height: 1.7;

  margin-top: 20px;

  position: relative;

}