/***** font family *****/
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
/***** End font family *****/


/* =====================================================
   BASE RESET & GLOBAL RULES
===================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--para-color);
  background-color: var(--white-color);
  line-height: 1.6;
}

/* =====================================================
   THEME VARIABLES (LOGO BASED)
===================================================== */
:root {

  /* Fonts */
  --font-primary: 'Montserrat', sans-serif;
  --font-heading: 'Montserrat', sans-serif;

  /* ===== Backgrounds ===== */
  --bg-color: #ffffff;
  --white-color: #ffffff;
  --dark-color: #05195D;

  /* ===== Logo Based Colors ===== */
  --heading-color: #0D2F6F;
  --sub-heading: #1B75BC;
  --para-color: #2a2a2a;

  /* ===== Accent Blue ===== */
  --btn-bg-color: #2AAAE2;
  --btn-hover-color: #1C8BC3;
  --circle-color: #2AAAE2;

  /* ===== Header & Footer ===== */
  --header-color: #0D2F6F;
  --footer-background-color: #071E44;

  /* ===== Supporting UI ===== */
  --supporting-color: #F2F7FD;

  /* ===== Shadows ===== */
  --btn-box-shadow: rgba(42,170,226,0.35) 0px 10px 25px;

  --box-shadow:
  rgba(0,0,0,0.06) 0px 6px 24px,
  rgba(0,0,0,0.06) 0px 0px 0px 1px;

  --box-shadow-hover-color:
  rgba(0,0,0,0.15) 0px 20px 40px -10px;

  --image-shadow:
  rgba(27,117,188,0.25) 0px 8px 24px;

  /* ===== Gradient ===== */
  --gradient-color: linear-gradient(135deg, #2a2a2a, #071E44);
}

/* =====================================================
   TYPOGRAPHY
===================================================== */

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  color: var(--heading-color);
  letter-spacing: 0.3px;
}

h1 {font-size:3.2rem;font-weight:700;}
h2 {font-size:2.8rem;font-weight:600;}
h3 {font-size:2.4rem;font-weight:600;}
h4 {font-size:2.2rem;font-weight:500;}
h5 {font-size:2rem;font-weight:500;}
h6 {font-size:1.8rem;font-weight:400;}

p,li,a{
  font-size:1.6rem;
  color:var(--para-color);
}

a{text-decoration:none;}

/* =====================================================
   LAYOUT
===================================================== */

.container{
  max-width:120rem;
  margin:0 auto;
  padding:1.5rem 1rem;
}

.grid{display:grid;gap:2rem;}

.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

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

.hero-image{
  width:100%;
  height:45rem;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:flex-end;
  padding:2rem;
  color:var(--white-color);
}

/* =====================================================
   BUTTONS
===================================================== */

.btn{
  background: linear-gradient(90deg, #0F4C81, #1FA2C9);
  padding: 12px 24px;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  font-size: 1.6rem;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
}

.btn a{
  color:white;
}

.btn:hover{
  background-color:var(--btn-hover-color);
}
/* WHITE GLOW ANIMATION */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transition: 0.6s;
}

.btn:hover::before {
  left: 100%;
}

/* Hover effect */
.btn:hover {
 color: white;
}


/* =====================================================
   CARD
===================================================== */

.card{
  background-color:var(--white-color);
  padding:1.5rem;
  border-radius:8px;
  box-shadow:var(--box-shadow);
  transition:all .3s ease;
}

.card:hover{
  box-shadow:var(--box-shadow-hover-color);
}

/***** common image *****/

.commonImage{
  width:100%;
  height:450px;
  background-image:linear-gradient(to right,rgba(0,0,0,0.3)),url(../images/common\ image2.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  display:flex;
  justify-content:start;
  align-items:flex-end;
  z-index:1;
}

.commonImage h2{
  color:white;
  font-size:3.2rem;
  font-weight:700;
  margin-bottom:1rem;
  z-index:2;
}

.commonImageContactUs{
  width:100%;
  height:450px;
  background-image:linear-gradient(to right,rgba(0,0,0,0.3)),url(../images/contactUsCommonImage.jpg);
  background-size:100% 100%;
  background-repeat:no-repeat;
  display:flex;
  justify-content:start;
  align-items:flex-end;
  z-index:1;
}

.commonImageContactUs h2{
  color:white;
  font-size:3.2rem;
  font-weight:700;
  margin-bottom:1rem;
  z-index:2;
}
/***** header section *****/

.header{
  position:fixed;
  z-index:1000;
  width:100%;
  box-shadow:1px 2px 15px 2px var(--supporting-color);
  padding:0 1rem;
  background-color:white;
}

.nav-item{
  text-transform:capitalize;
  padding:5px 15px;
  font-weight:600;
}

.nav-link{
  color:var(--dark-color);
  font-weight:600;
  font-size:2rem;
}

.nav-link:hover{
  color:var(--circle-color);
}

/* SCROLL HEADER */

/* .header.scrolled{
  background-color:#ffffff;
  box-shadow:0 6px 20px rgba(15,42,82,0.15);
}

.header.scrolled .nav-link{
  color:var(--heading-color);
}

.header.scrolled .nav-link:hover{
  color:var(--btn-hover-color);
} */

/* HAMBURGER */

.navbar-toggler{
  border:none;
  outline:none;
  font-size:2.4rem;
}

.navbar-toggler-icon{
  width:1.5em;
  height:1.5em;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%230D2F6F' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:100%;
}

/* HEADER BUTTON */

.headerBtn{
  background-color:var(--btn-bg-color);
  color:var(--white-color);
  padding:0.8rem 1.5rem;
  font-size:1.8rem;
  font-weight:600;
  border-radius:10px;
  box-shadow:var(--btn-box-shadow);
  transition:all .3s ease;
  display:flex;
  align-items:center;
  gap:0.8rem;
}

.headerBtn:hover{
  background-color:var(--btn-hover-color);
  color:white;
}
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

.dropdown-menu {
  border-radius: 10px;
  padding: 10px 0;
}

.dropdown-item {
  padding: 10px 20px;
  font-weight: 500;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
  color: #000;
}

/***** End header *****/

/***** footer section *****/  
.footer{
    color: var(--white-color);
    position:relative;
    padding: 2rem 1rem;
    border-top: 0.6rem solid var(--sub-heading);   
    /* background: linear-gradient(90deg, #0F2A52 0%, #0A1F3D 30%, #020617 70%);   */
      /* background: linear-gradient(135deg, #0a2540, #134e5e, #1c92d2);
      background: linear-gradient(135deg, #000000, #1f1c2c, #4a00e0);
      background: linear-gradient(135deg, #232526, #414345, #071E44);
      background: linear-gradient(135deg, #0f2027, #203a43, #1c3b57);
      background: linear-gradient(135deg, #0a1f2e, #1b3a4b, #1c3b57);
      background: linear-gradient(135deg, #2a2a2a, #071E44); */
      background: #EAF2F8;
   
}

.socialMedia {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;  
    
}

 .socialIcon{
    width: 4rem;
    height: 4rem;
    padding: 0.8rem;
  }

.socialMedia {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    font-size: 2rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
}
.socialIcon{
    padding: 0.8rem;
    background-color: var(--heading-color);
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    transition: transform ease-in 0.3s ;
    -webkit-transition: transform ease-in 0.3s ;
    -moz-transition: transform ease-in 0.3s ;
    -ms-transition: transform ease-in 0.3s ;
    -o-transition: transform ease-in 0.3s ;
}

.socialIcon:hover{
    transform: translateY(-1rem);
    -webkit-transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
    -ms-transform: translateY(-1rem);
    -o-transform: translateY(-1rem);
}


.footerheading h3{
    color: var(--heading-color);
    font-weight: 600;
}

.footerheading p{
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--dark-color);
}

.footerLastSection{
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 0.2rem solid white;
    padding: 0.5rem 0;
}

.footer .nav-link{
  color: var(--dark-color);
  font-weight: 500;
}
.userRequiredForm {
  font-size: 2rem;
  
  color: #ffffff;
  animation: glowPulse 2.2s ease-in-out infinite;
}
.userRequiredForm a{
    color: var(--dark-color);
    font-weight: 600;
}
@keyframes glowPulse {
  0% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(124, 197, 54, 0);
  }
  50% {
    transform: scale(1.05);
    text-shadow: 
      0 0 10px rgba(124, 197, 54, 0.7),
      0 0 20px rgba(124, 197, 54, 0.4);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(124, 197, 54, 0);
  }
}


/***** End footer section *****/


/***** hero section start *****/  

.main {
  position: relative;
  width: 100%;
  height: 100vh;  
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
 background:
  linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    rgba(0, 0, 0, 0.15) 70%,
    rgba(0, 0, 0, 0.0) 100%
  ),
  url("../images/hero\ section\ final.png");
  background-repeat: no-repeat;
  background-size: cover;
 
 
}

.hero-section {   
  width: 100%;
  padding: 2rem;
  /* background-color: rgba(15, 42, 82, 0.3); */
  text-align: left;
  }


.hero-section h1 {
  font-size: 4.2rem;
  color: white;
  font-weight: 800;
  margin-bottom: 1rem;
  width: 80%;
 
}


.hero-section p {
  color: var(--para-color);
  font-weight: 400;
  margin-bottom: 3rem;
  max-width: 80%;
}

.dual-button{
    display: flex;    
    /* padding: 1rem 1rem; */
    background-color: transparent;
   
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    font-weight: bold;     
    gap: 2rem;
    
    
  }

.left-btn{
    border: none;
    outline: none;
    padding:0.8rem 1.6rem;
    border-radius: 2rem;
    font-weight: 600;    
    background: var(--dark-color);
    color: var(--white-color);
    transition: background 0.3s linear;
    cursor: pointer;
    font-size: 2rem;
    
}
.left-btn:hover{
    background: var(--heading-color);
    color: white;
    
    
}

.right-btn{
    border: none;
    outline: none;
   padding: 0.8rem 1.6rem;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    font-weight: 600;
    background-color:var(--btn-bg-color);
    color:var(--white-color);
    transition: background 0.3s linear;
    -webkit-transition: background 0.3s linear;
    -moz-transition: background 0.3s linear;
    -ms-transition: background 0.3s linear;
    -o-transition: background 0.3s linear;
    /* border: 0.2rem solid  white; */
    font-size: 2rem;
}

.right-btn a{
  color: white;
}
.right-btn:hover{
   background-color: var(--btn-hover-color);
   color: white;
    
}



.fa-solid{
    font-size: 1.8rem;
    color: var(--white-color);
    font-weight: 600;
    margin-right: 1rem;
}
/***** end hero section*****/  
/***** start home page about us *****/ 
.aboutusHomepageImage{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboutusHomepageImage img{
    width: 100%;
    height: auto;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    box-shadow: var(--box-shadow);
    padding: 0;
}

.aboutusHomepagecontent p{
    text-align: justify;
    margin-bottom: 3rem;
}

.point {
  font-size: 1.6rem;
  color: var(--para-color);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 1rem;
  font-family: outfit, sans-serif;
  
}

.point i {
  font-size: 2.4rem;
  color: var(--btn-bg-color);
  background: var(--supporting-color);
  padding: 0.8rem;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.homePageAboutBtn{
    margin-top: 1.5rem;
}


/***** End home page about us *****/ 
 /***** home page our service section *****/  
 .grid {
  display: grid;
 place-items: center;
}

/* =========================
   DESKTOP (3 cards)
========================= */
.grid-3 {
  grid-template-columns: repeat(3, 350px);
  gap: 20px;
}

/* CARD */
.grid-3 .card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  text-align: center;
  width: 100%; /* IMPORTANT FIX */
  max-width: 350px; /* control size */
  transition: all 0.4s ease;
  position: relative;
  padding: 1.5rem;
}

/* HOVER */
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* IMAGE */
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover img {
  transform: scale(1.08);
}

/* CONTENT */
.card h3 {
  font-size: 20px;
  margin: 20px 0 10px;
  color: #0b2c5f;
}

.card p {
  font-size: 14px;
  color: #555;
  padding: 0 20px;
  margin-bottom: 20px;
}

/* =======================
 /***** End home page our service section *****/

 /***** our hvac engineering process *****/ 
 .process-section{
  padding: 4rem 0;
  /* background: var(--supporting-color); */
  text-align: center;
}

/* Heading */


/* Row */
.process-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  position: relative;
}

/* Connector Line */
.process-row::before{
  content: "";
  position: absolute;
  top: 45px;
  left: 10%;
  width: 80%;
  height: 2px;
  background: #dbe7f3;
  z-index: 0;
}

/* Item */
.process-item{
  max-width: 300px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Outer Ring */
.icon-wrapper{
  width: 90px;
  height: 90px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: rgba(42,170,226,0.12); /* light theme blue */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--image-shadow);
}

/* Inner Circle */
.icon-inner{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gradient-color); /* 🔥 gradient use */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon */
.icon-inner i{
  color: #fff;
  font-size: 1.6rem;
}

/* Title */
.process-item h3{
  /* font-size: 1.6rem; */
  font-weight: 600;
  margin-bottom: 0.8rem;
  color: var(--heading-color);
  text-transform: uppercase;
}

/* Text */
.process-item p{
  /* font-size: 1.4rem; */
  color: var(--para-color);
  line-height: 1.7;
}

/* Hover Effect */
.process-item:hover .icon-inner{
  transform: scale(1.1);
  transition: 0.3s;
}

.process-item:hover{
  transform: translateY(-5px);
  transition: 0.3s;
}

.icon-wrapper{
  width: 100px;
  height: 100px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: rgba(42,170,226,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--image-shadow);
}

/* Inner Circle */
.icon-inner{
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: var(--gradient-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ICON FIX 🔥 */
.icon-inner i{
  font-size: 3.2rem;   /* 👈 bada kiya */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
 /***** End our hvac engineering process *****/
 
 .about-pro-section{
  padding: 6rem 0;
  /* background: var(--gradient-color); */
  color: #fff;
  /* background: linear-gradient(90deg, #1B75BC, #0D2F6F);
  background: linear-gradient(180deg, #071E44 0%, #0D2F6F 60%, #1B75BC 100%); */
  background: var(--gradient-color);
}

.about-pro-parent{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
}

/* LEFT CONTENT */
.about-pro-content h2{
  /* font-size: 3.2rem; */
  line-height: 1.3;
  margin: 1rem 0;
  color: #fff;
}

.about-tag{
  color: var(--btn-bg-color);
  font-size: 1.2rem;
  letter-spacing: 2px;
  border-bottom: 2px solid var(--btn-bg-color);
  padding-bottom: 0.3rem;
}

.about-pro-content p{
 color: white;
  /* margin-bottom: 1.5rem; */
  text-align: justify;
}

/* LIST */
.about-list{
  list-style: none;
  margin-bottom: 2rem;
}

.about-list li{
  /* font-size: 1.4rem; */
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: white;
}

.about-list i{
  color: var(--btn-bg-color);
}

/* BUTTON */


.about-btn:hover{
  background: var(--btn-hover-color);
}

/* RIGHT IMAGE */
.about-pro-image{
  position: relative;
}

.about-pro-image img{
  width: 100%;
  border-radius: 6px;
  -webkit-border-radius:;
  -moz-border-radius:;
  -ms-border-radius:;
  -o-border-radius:;
}

/***** what our clients says *****/  
.testimonial-section{ 
  background: var(--supporting-color);
  overflow: hidden;
  padding: 6rem 0;
}

/* Heading */
.testimonial-header{
  text-align: center;
  margin-bottom: 3rem;
}

/* Slider */
.testimonial-slider{
  overflow: hidden;
}

.testimonial-track{
  display: flex;
  gap: 2rem;
  animation: scroll 25s linear infinite;
}

/* CARD DESIGN */
.testimonial-card-new{
  min-width: 350px;
  max-width: 350px;
  background:white;
  padding: 2.5rem;
  border-radius: 6px;
  box-shadow: var(--box-shadow);
  position: relative;
  transition: 0.3s;
}

/* Hover */
.testimonial-card-new:hover{
  transform: translateY(-6px);
  box-shadow: var(--box-shadow-hover-color);
}

/* Top */
.testimonial-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.designation{
  font-size: 1.3rem;
  color: #666;
}

/* Stars */
.stars{
  color: #ff9800;
  font-size: 1.4rem;
}

/* Text */


/* Quote mark */
.testimonial-card-new::after{
  content: "”";
  font-size: 6rem;
  color: rgba(0,0,0,0.05);
  position: absolute;
  top: 10px;
  right: 20px;
}

/* Animation */
@keyframes scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* Pause on hover */
.testimonial-slider:hover .testimonial-track{
  animation-play-state: paused;
}

/***** End what our clients says *****/
/***** counter section *****/ 
.stats-section {
  /* background: var(--gradient-color); */
  padding: 60px 20px;
  color: #fff;
}

.stats-wrapper {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat-box {
  background: var(--heading-color);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  transition: 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
}

.stat-box:hover {
  transform: translateY(-8px);
  background: #14232E;
}

.stat-box h2 {
  font-size: 36px;
  font-weight: 700;
  color: #38bdf8;
}

.stat-box p {
  margin-top: 8px;
  /* font-size: 14px; */
  letter-spacing: 1px;
  color: white;
}

.plus, .percent {
  color: white;
  font-size: 20px;
  margin-left: 3px;
}


/***** End counter section *****/

/***** our projects *****/  
.project-section {
  padding: 6rem 0;
  background: white;
  text-align: center;
  
}

.project-header span {
  font-size: 1.8rem;
  letter-spacing: 3px;
  /* color: #64748b; */
}


/* .project-header p {
  color: #64748b;
  max-width: 600px;
  margin: auto;
} */

/* GRID */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 50px;
}

/* CARD */
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* IMAGE */
.project-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: 0.5s ease;
}

/* OVERLAY */
.project-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 25px;
  background: linear-gradient(to top, rgba(15,23,42,0.9), transparent);
  color: #fff;
  text-align: left;
  backdrop-filter: blur(6px);
}

.project-overlay h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.project-overlay p {
  margin-top: 6px;
  font-size: 14px;
  color:white;
}

/* HOVER EFFECT */
.project-card:hover img {
  transform: scale(1.1);
}

.project-card:hover .project-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

/* BUTTON */
.project-btn {
  margin-top: 50px;
}

.project-btn a {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: 0.3s;
  box-shadow: 0 8px 25px rgba(14,165,233,0.3);
}

.project-btn a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(14,165,233,0.5);
}


/***** End our projects *****/

/***** cta  *****/ 

.cta-section {
  padding: 40px 0;
  /* background: 
    linear-gradient(135deg, rgba(15,32,39,0.95), rgba(32,58,67,0.95), rgba(28,59,87,0.95)),
    url('https://www.transparenttextures.com/patterns/cubes.png'); */
    background: var(--gradient-color);
    background:var(--dark-color);
    /* background: linear-gradient(135deg, , ); */
    background: linear-gradient(135deg, #2a2a2a, #071E44);
  color: #fff;
}
.cta-form {
  background: #ffffff;
  padding: 30px;
  border-radius: 10px;
  -webkit-border-radius:;
  -moz-border-radius:;
  -ms-border-radius:;
  -o-border-radius:;
}



.cta-form input,
.cta-form select,
.cta-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1.6rem;
  -webkit-border-radius:;
  -moz-border-radius:;
  -ms-border-radius:;
  -o-border-radius:;
}

.cta-form textarea {
  height: 80px;
  resize: none;
}

.cta-btn {
  width: 100%;
  background: #e53935;
  color: #fff;
  border: none;
  padding: 14px;
  font-weight: 600;
  border-radius: 5px;
  transition: 0.3s;
  -webkit-border-radius:;
  -moz-border-radius:;
  -ms-border-radius:;
  -o-border-radius:;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}

.cta-btn:hover {
  background: #c62828;
}

.cta-content span h5{
  color:var(--btn-bg-color);

 
}

.cta-content h2 {
color: white;
  margin: 15px 0;
  font-size: 3.2rem;
} 

.cta-content p {
  color: white;
} 

.cta-content ul {
  list-style: none;
  padding: 0;
}

.cta-content ul li {
  margin-bottom: 10px;
  /* position: relative; */
  /* padding-left: 25px; */
  color: white;
}

.cta-icon{
    width: 30px;
    height: 30px;
    min-width: 40px;
    min-height: 40px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50%;
    background: var(--sub-heading);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.cta-content ul li{
    display: flex;
    align-items: center;
    gap: 15px;
}
/***** End cta  *****/

/***** our clients logo *****/ 
.ourClientParent{
    width:100%;
    overflow:hidden;
    position:relative;
    padding:20px 0;
}

.ourClientTrack{
    display:flex;
    align-items:center;
    gap:10px;
    width:max-content;
    animation: clientScroll 25s linear infinite;
}

.ourClientTrack img{
    width:240px;
    height:90px;
    object-fit:contain;
    flex-shrink:0;
    transition:0.3s;
}

.ourClientTrack img:hover{
    transform:scale(1.08);
}

@keyframes clientScroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}
/***** End our clients logo *****/
/***** our partner  *****/

/*=====================================
Associate Partner
=====================================*/

#associatePartner{

    padding:4rem 0;
    background:#fff;

}

.partner-image{

    background:#fff;
    border-radius:20px;
    padding:4rem;
    box-shadow:var(--box-shadow);
    text-align:center;

}

.partner-image img{

    max-width:100%;
    transition:.4s;

}

.partner-image:hover img{

    transform:scale(1.04);

}

.partner-content{

    padding-left:3rem;

}

.partner-tag{

    display:inline-block;
    background:var(--sub-heading);
    color:#fff;
    padding:.8rem 2rem;
    border-radius:50px;
    font-size:1.4rem;
    font-weight:600;
    margin-bottom:2rem;

}

.partner-content h2{

    margin-bottom:2rem;
    font-size:4rem;
    font-weight:700;

}

.partner-content p{

    margin-bottom:2rem;
    line-height:1.9;
    color:#555;

}

.partner-badge{

    display:flex;
    align-items:center;
    gap:15px;

    background:var(--supporting-color);

    border-left:5px solid var(--sub-heading);

    padding:18px 22px;

    border-radius:10px;

    margin:3rem 0;

}

.partner-badge i{

    color:var(--sub-heading);
    font-size:2.8rem;

}

.partner-badge span{

    font-size:1.6rem;
    font-weight:600;

}
/***** End our partner  *****/

/***** whatapp *****/  
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: green;
  border-radius: 50%;
  font-size: 50px;
  z-index: 9999;
  transition: 0.3s;
  /*🔥SoftGlow*//*text-shadow:     0 0 5px rgba(0, 255, 0, 0.6),    0 0 10px rgba(0, 255, 0, 0.4),    0 0 15px rgba(0, 255, 0, 0.3);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
} */
}

.whatsapp-float:hover {
  transform: scale(1.1);

  /* 🔥 Slightly Strong Glow on Hover */
  text-shadow: 
    0 0 8px rgba(0, 255, 0, 0.8),
    0 0 15px rgba(0, 255, 0, 0.6),
    0 0 25px rgba(0, 255, 0, 0.5);
}

/***** End whatapp *****/
/***** about us page *****/ 

#aboutIntro{
    padding:4rem 0;
    background:var(--gradient-color);
    color:#fff;
}

.about-content{
    padding-right:4rem;
}

.about-content h2{
    color:#fff;
    margin:2.5rem 0;
    line-height:1.3;
    font-size:4.2rem;
    font-weight:700;
}

.about-content p{
    color:rgba(255,255,255,.88);
    font-size:1.7rem;
    line-height:1.9;
    margin-bottom:2rem;
}

.about-content strong{
    color:#fff;
    font-weight:600;
}

.about-image{
    position:relative;
}

.about-image img{
    width:100%;
    border-radius:2rem;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
    transition:.4s ease;
    -webkit-border-radius:2rem;
    -moz-border-radius:2rem;
    -ms-border-radius:2rem;
    -o-border-radius:2rem;
    -webkit-transition:.4s ease;
    -moz-transition:.4s ease;
    -ms-transition:.4s ease;
    -o-transition:.4s ease;
}

.about-image img:hover{
    transform:translateY(-8px);
    -webkit-transform:translateY(-8px);
    -moz-transform:translateY(-8px);
    -ms-transform:translateY(-8px);
    -o-transform:translateY(-8px);
}

/* Glow effect behind image */
/* .about-image::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(0, 207, 255, 0.2);
  filter: blur(100px);
  top: -50px;
  right: -50px;
  z-index: 0;
  -webkit-filter: blur(100px);
} */
/***** about us page services we offer *****/
.about-split {
  padding: 4rem 0;
  
}

/* LEFT BOX */
.quote-box {
  background: #fff;
  padding: 40px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.quote-box p {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
  border-left: 3px solid var(--dark-color);
  padding-left: 20px;
}

/* .quote-box h4 {
  margin-top: 30px;
  font-weight: 700;
  color: #111;
} */

.quote-box span {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--dark-color)
}

/* Red curve shape */

/* RIGHT SIDE */
.about-right .tag {
  font-size: 1.8rem;
  color: var(--para-color);
  letter-spacing: 2px;
}



/* LIST */
.about-list {
  list-style: none;
  padding: 0;
}

.about-list li {
  margin-bottom: 18px;
  font-size: 16px;
  /* position: relative; */
  padding-left: 35px;
  color: white;
}

/* RED CHECK ICON */




/***** our mission vision *****/ 
.mission-vision {
  padding: 6rem 0;
  background: linear-gradient(135deg, #2a2a2a, #071E44);
  color: #fff;
}

/* Card */
.mv-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 40px;
  border-radius: 20px;
  position: relative;
  backdrop-filter: blur(10px);
  transition: 0.4s;
  height: 100%;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

/* Hover effect */
.mv-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

/* Titles */
.mv-card h3 {
  /* font-size: 28px; */
  margin-bottom: 20px;
  position: relative;
  color: white;
}

/* Accent line */
.mv-card h3::after {
  content: "";
  width: 60px;
  height: 3px;
  background: #00cfff;
  display: block;
  margin-top: 10px;
}

/* Text */
.mv-card p {
  color: white;
  /* font-size: 16px;
  line-height: 1.8; */
  margin-bottom: 15px;
}

/* Tag */
.mv-tag {
  display: inline-block;
  margin-top: 20px;
  font-size: 13px;
  letter-spacing: 2px;
  color: #00cfff;
}

/* Different highlight border */
.mission-card {
  border-left: 4px solid var(--sub-heading);
}

.vision-card {
  border-left: 4px solid white;
}

/* Responsive */
@media (max-width: 991px) {
 
}

/***** End our mission vision *****/
/***** about us page process *****/  
/*==========================
 HVAC PROCESS
==========================*/

#workProcess{
    padding:4rem 0;
    background:var(--supporting-color);
}

.section-heading{
    max-width:760px;
    margin:0 auto 6rem;
    text-align:center;
}

.process-tag{
    display:inline-block;
    padding:.8rem 2rem;
    background:var(--sub-heading);
    color:#fff;
    border-radius:50px;
    margin-bottom:2rem;
}

.section-heading h2{
    margin-bottom:1.5rem;
}

.process-wrapper{
    display:grid;
    grid-template-columns:repeat(11,1fr);
    align-items:center;
    gap:1rem;
}

.process-card{

    background:#fff;
    border-radius:18px;
    padding:3rem 2rem;
    text-align:center;
    box-shadow:var(--box-shadow);
    transition:.4s;
    position:relative;
    height:100%;
}

.process-card:hover{

    transform:translateY(-10px);
    box-shadow:var(--box-shadow-hover-color);

}

.process-number{

    position:absolute;
    top:15px;
    right:18px;
    font-size:3rem;
    font-weight:700;
    color:#e9eef5;

}

.process-icon{

    width:75px;
    height:75px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(135deg,var(--heading-color),var(--sub-heading));
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:3rem;

    margin-bottom:2rem;

}

.process-card h3{

    margin-bottom:1rem;
    font-size:2rem;

}

.process-card p{

    font-size:1.5rem;
    line-height:1.8;

}

.process-arrow{

    text-align:center;
    font-size:2.8rem;
    color:var(--sub-heading);

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:991px){

.process-wrapper{

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

}

.process-arrow{

display:none;

}

}

@media(max-width:576px){

.process-wrapper{

grid-template-columns:1fr;

}

.process-card{

padding:3rem 2rem;

}

}
/***** End about us page process *****/

/***** End about us page services we offer *****/


/***** End about us page *****/
/***** contact us page *****/ 
.hero {
  background: var(--gradient-color);
  color: #fff;
  text-align: center;
  padding: 90px 20px;
}

.hero h1 {
  color: white;
}

/* ================= CONTACT CARDS ================= */
.cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: -60px;
  padding: 0 20px;
  flex-wrap: wrap;
}

.card {
  background: #fff;
  padding: 30px;
  width: 300px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

.card .icon {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--dark-color);
  
}
.card .icon {
  width: 60px;
  height: 60px;
  margin: auto;
  margin-bottom: 15px;
  background: rgba(7,30,68,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #071E44;
  font-size: 24px;
}
/* ================= MAIN SECTION ================= */
.contact-section {
  display: flex;
  max-width: 1200px;
  margin: 80px auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

/* ================= FORM ================= */
.form-area {
  flex: 1;
  padding: 30px;
  background: #f8f9fb;
}

.form-row {
  display: flex;
  gap: 15px;
  /* margin-bottom: 15px; */
}

.form-area input,
.form-area select,
.form-area textarea {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 1.6rem;
  margin-bottom: 15px;
}

.form-area textarea {
  height: 130px;
  resize: none;
}

.form-area button {
  width: 100%;
  padding: 15px;
  background: var(--dark-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  margin-top: 15px;
  cursor: pointer;
}



/* ================= IMAGE ================= */
.image-area {
  flex: 1;
  background: linear-gradient(rgba(7,30,68,0.7), rgba(7,30,68,0.7)),
              url('https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc') center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 40px;
  text-align: center;
}

.image-area h2 {
color:white;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .contact-section {
    flex-direction: column;
  }

  .form-row {
    flex-direction: column;
  }

  .image-area {
    height: 250px;
  }
}

/***** End contact us page *****/
/***** services page  *****/  
.airpro-hero2 {
  padding: 6rem 0;
  /* background: linear-gradient(135deg, #061A3A 0%, #0A2F5A 40%, #0F4C81 70%, #1FA2C9 100%); */
  position: relative;
  overflow: hidden;
  background-color: #14232E;
  
}

/* glow effect */
.airpro-hero2::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(7, 0, 0, 0.3), transparent);
  top: -100px;
  right: -30px;
  border-radius: 30%;
  -webkit-border-radius: 30%;
  -moz-border-radius: 30%;
  -ms-border-radius: 30%;
  -o-border-radius: 30%;
}

.airpro-hero2-wrap {
  display: flex;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

/* IMAGE */
.hero2-image {
  flex: 1;
  min-width: 300px;
}

.hero2-image img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* CONTENT */
.hero2-content {
  flex: 1;
  min-width: 300px;
  color: #fff;
  backdrop-filter: blur(10px);
}

.tag {
  color: var(--sub-heading);
  font-size: 1.6rem;
  letter-spacing: 2px;
  font-weight: 600;
}

.hero2-content h1 {
  /* font-size: 44px; */
  margin: 15px 0;
  color: white;
}

.hero2-content p {
  /* opacity: 0.85; */
  margin-bottom: 20px;
  color: white;
}

/* POINTS */
.hero2-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 25px;
  font-size: 1.6rem;
}

/* BUTTONS */
.hero2-buttons {
  display: flex;
  gap: 15px;
}

.btn-main {
  background: linear-gradient(90deg, #0F4C81, #1FA2C9);
  padding: 8px 19px;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 400;
}

/* WHITE GLOW ANIMATION */
.btn-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transition: 0.6s;
}

.btn-main:hover::before {
  left: 100%;
}

/* Hover effect */
.btn-main:hover {
 color: white;
}

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

  .hero2-content h1 {
    font-size: 28px;
  }

  .hero2-points {
    grid-template-columns: 1fr;
  }

}
/***** End services page  *****/
.airpro-about-sec {
  /* padding: 6rem 0; */
  position: relative;
}

/* IMAGE */
.airpro-image-box img {
  width: 100%;
  border-radius: 10px;
}

/* CARDS WRAPPER */
.airpro-cards {
  margin-top: -80px;
  display: flex;
  gap: 25px;
  justify-content: center;
  flex-wrap: wrap;
}

/* CARD STYLE */
.airpro-cards .card {
  flex: 1;
  min-width: 250px;
  background: rgba(255,255,255,0.95);
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
  transition: 0.3s;
}

.airpro-cards .card:hover {
  transform: translateY(-8px);
}

/* ICON */
.icon {
  font-size: 32px;
  margin-bottom: 10px;
  color: #1FA2C9;
}

/* TEXT */
.airpro-cards h4 {
  margin-bottom: 10px;
  /* font-weight: 600; */
}

/* .airpro-cards p {
  font-size: 14px;
  opacity: 0.7;
} */

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

  .airpro-cards {
    margin-top: 20px;
  }

}
/* =====================================================
   RESPONSIVE BREAKPOINTS
===================================================== */

/* --------- ≤ 1400px --------- */
@media (max-width: 1400px) {
  html { font-size: 60%; }
}

/* --------- ≤ 1200px --------- */
@media (max-width: 1200px) {
  html { font-size: 58%; }
  .container { padding: 1.5rem; }
}

/* --------- ≤ 992px (Tablet Landscape) --------- */
@media (max-width: 992px) {
  html { font-size: 56%; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
 .services-parent{
    grid-template-columns: 1fr 1fr;
  }
  .stats-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
   .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
   .about-content {
    text-align: center;
    padding-right: 0;
  }

  .about-content h2 {
    font-size: 30px;
  }

  .about-image {
    text-align: center;
  }
 .about-right h2 {
    font-size: 28px;
  }

  .quote-box {
    padding: 25px;
  }

  .quote-box p {
    font-size: 16px;
  }
   .mv-card {
    padding: 25px;
  }

  .mv-card h3 {
    font-size: 24px;
  }
    .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid {
    justify-content: center;
  }

  .card {
    max-width: 100%;
  }

}

/* --------- ≤ 768px (Tablet Portrait) --------- */
@media (max-width: 768px) {
  html { font-size: 54%; }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  h1 { font-size: 2.8rem; }
  h2 { font-size: 2.4rem; }

 .main{
    height: auto;              /* ❌ 100vh hata diya */
    min-height: 60vh;          /* 👈 compact hero */
    padding: 7rem 0 5rem;      /* top-bottom spacing */
    background:
      linear-gradient(
        260deg,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.45) 60%,
        rgba(0,0,0,0.25) 100%
      ),
      url("../images/hero\ section\ final.png");
    background-size: cover;
    background-position: center;
    position: relative;
    
  }

  .hero-section{
    text-align: center;        
    padding: 1.5rem;
  }

  .hero-section h3{
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
  }

  .hero-section h1{
    font-size: 3.2rem;
    width: 100%;
    line-height: 1.2;
  }

  .dual-button{
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .left-btn,
  .right-btn{
    font-size: 1.4rem;
    padding: 0.6rem 1rem;
    white-space: nowrap;
  }
  
  .process-row{
    flex-direction: column;
  }

  .process-row::before{
    display: none;
  }
  .about-pro-parent{
    grid-template-columns: 1fr;
  }
  .testimonial-card-new{
    min-width: 280px;
  }

 

}

/* --------- ≤ 576px (Mobile) --------- */
@media (max-width: 576px) {
  html { font-size: 52%; }

  h1 { font-size: 2.4rem; }
  h2 { font-size: 2.1rem; }

  p, li, a { font-size: 1.5rem; }

  .btn {
    width: 100%;
    text-align: center;
  }

 

  .main {
    
  position: relative;
  width: 100%;
  height: auto;  
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
 background:
  linear-gradient(
    120deg,
    rgba(0, 0, 0, 0.75) 20%,
    rgba(0, 0, 0, 0.45) 60%,
    rgba(0, 0, 0, 0.15) 70%,
    rgba(0, 0, 0, 0.0) 100%
  ),
  url("../images/hero\ section\ final.png");
  background-repeat: no-repeat;
  background-size: cover;
 
 
}

 .main .btn{
  width: 100%;
        margin: 0.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.2rem 1rem;
        font-size: 1.4rem;
 }

  .hero-section h1{
    font-size: 2.6rem;
  }

  .hero-section h3{
    font-size: 1.6rem;
  }
 

.hero-section p {
    color: var(--para-color);
    font-weight: 400;
    margin-bottom: 1rem;
    max-width: 100%;
}
  .stats-wrapper {
    grid-template-columns: 1fr;
  }
  .project-grid {
    grid-template-columns: 1fr;
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .card {
    width: 100%;
    max-width: 100%;
  }
   .stats-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
.stats-section {
    /* background: var(--gradient-color); */
    padding: 0;
    color: #fff;

}
.commonImage{
  width:100%;
  height:250px;
  background-image:linear-gradient(to right,rgba(0,0,0,0.3)),url(../images/common\ image2.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  display:flex;
  justify-content:start;
  align-items:flex-end;
  z-index:1;
}

.commonImage h2{
  color:white;
  font-size:2.4rem;
  margin:0 0 1rem 2rem;
}




/* --------- ≤ 400px (Small Mobile) --------- */
@media (max-width: 400px) {
  html { font-size: 50%; }
}


.main1{
  width: 100%;
  height: 100vh;
  /* background-color: blue; */
}

.main2{
  width: 100%;
  height: 100vh;
  /* background-color: green; */
}