@font-face {
    font-family: ESKlarheitKurrent-Rg;
	src: url(https://fastestweight.visiwebsolutions.com/assets/fonts/ES_Klarheit_Kurrent/otf/ESKlarheitKurrent-Rg.otf)
  }	
    *{box-sizing:border-box}
    body{
      margin:0;
      padding: 0;
      font-family: ESKlarheitKurrent-Rg;
      color: #111;
      background:#fff;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
/* Top nav wrapper */
    .topbar{
      background: #fff;
      height: var(--nav-height);
      display:flex;
      align-items:center;
      justify-content:center; /* center container horizontally */
      position:relative;
     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }

    .container{
      width:100%;
      max-width: 1500px;
      padding: 0 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    /* Logo */
    .logo{
      display:flex;
      align-items:center;
      gap:10px;
	  margin-left: 15%;
    }
    .logo img{
      height: 60px;
      display:block;
    }
    .logo .brand{
      font-weight:700;
      font-size:14px;
      letter-spacing:0.6px;
    }

    /* Navigation */
    nav{
      display:flex;
      align-items:center;
	  word-spacing: -2px !important;
      gap:28px;
      justify-self:center;
      flex-direction: row;
    }
    nav a{
      text-decoration:none;
      color:var(--accent);
      font-weight: 500 !important;
      font-size:15px;
      text-transform: none !important;
      letter-spacing:0.4px;
      padding:6px 4px;
    }
    nav a:hover{ opacity:0.85; }

    /* Right-side spacer (keeps nav centered when logo present) */
    .spacer{
      width: calc(var(--logo-height) + 10px + 50px); /* matches logo width roughly */
      /* invisible element to keep nav centered */
    }
    .slider {
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
    }
    .slider img {
      width: 100%;
      height: auto;
      display: block;
    }
    .slick-dots {
    bottom: -30px;
	  display: none !important;
    }
    .slick-prev:before,
    .slick-next:before {
      color: black;
    }
:root{
      --nav-bg: #f6dedc; /* pale pink like screenshot */
      --nav-height: 72px;
      --max-width: 1200px;
      --accent: #111;
      --logo-height: 44px;
    }

    /* Top nav wrapper */
    .topbar{
      background: #fff;
      height: var(--nav-height);
      display:flex;
      align-items:center;
      justify-content:center; /* center container horizontally */
      position:relative;
    }

    .container{
      width:100%;
      max-width: 1500px;
      padding: 0 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    /* Logo */
    .logo{
      display:flex;
      align-items:center;
      gap:10px;
	    margin-left: 15%;
    }

    .logo img{
      height: 48px;
      display:block;
    }

    .logo .brand{
      font-weight:700;
      font-size:14px;
      letter-spacing:0.6px;
    }

    /* Navigation */
    nav{
      display:flex;
      align-items:center;
	    word-spacing: 6px;
      gap:28px;
      justify-self:center;
      flex-direction: row;
      margin: auto;
    }
    nav a{
      text-decoration:none;
      color:var(--accent);
      font-weight:600;
      font-size:15px;
      text-transform:uppercase;
      letter-spacing:0.4px;
      padding:6px 4px;
    }
    nav a:hover{ opacity:0.85; }

    /* Right-side spacer (keeps nav centered when logo present) */
    .spacer{
      width: calc(var(--logo-height) + 10px + 50px); /* matches logo width roughly */
      /* invisible element to keep nav centered */
    }
   .wrap{
      max-width: 1100px;
      margin: 40px auto;
      padding: 18px 20px;
	    margin-top: 50px !important;
    }

    /* Top icon row */
    .icon-row{
      display:flex;
      gap: 22px;
	    margin-left:10%;
      align-items:flex-start;
      justify-content:flex-start;
      padding: 8px 10px;
      margin-bottom: 28px;
      overflow:auto;
    }

    .icon-card{
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      min-width:92px;
      gap:10px;
      background: transparent;
      border-radius:12px;
      padding:10px 6px;
      cursor:pointer;
    }

    .icon-card .icon{
      width:56px;
      height:56px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: linear-gradient(90deg,rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 100%, rgba(255, 0, 0, 1) 100% );
      box-shadow: none;
    }

    .icon-card .label{
      font-size:13px;
      color:#050a4e !important;
	    font-weight: bold !important;
      line-height:1.05;
      font-weight:500;
    }

    /* selected state for first icon */
    .icon-card.selected .icon{
      transform: translateY(-1px);
    }

    .icon-card.selected .label{
      color:#050a4e !important;
      font-weight:600;
    }

    /* small red underline under selected icon label */
    .icon-card.selected::after{
      content:"";
      width:28px;
      height:3px;
      border-radius:3px;
      background:var(--selected-underline);
      display:block;
      margin-top:8px;
      transform: translateY(4px);
    }

    /* wide pill search/cta area */
    .ho-pill{
      background: var(--card-bg);
      border-radius:60px;
      box-shadow: 0 0 15px rgba(24,24,24,.161);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 31px 22px;
      gap: 18px;
      border: 1px solid rgba(0,0,0,0.02);
    }

    .ho-left{
      display:flex;
      align-items:center;
      gap:18px;
      min-width:0;
    }

    .ho-left .big-text{
      font-size:20px;
      font-weight:600;
      color:#111;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .ho-sub{
      font-size:14px;
      color:var(--muted);
      font-weight:400;
    }

    /* CTA button on right */
    .cta{
      display:inline-flex;
      align-items:center;
      gap:14px;
      border-radius:40px;
      padding:12px 20px;
      border:1px solid blue;
      background: transparent;
      font-weight:600;
      cursor:pointer;
      color:#1f2937;
      min-width:180px;
      justify-content:center;
    }

    /* .cta .arrow{
      display:inline-block;
      transform:translateX(0);
      transition:transform .18s ease;
    }
    .cta:hover .arrow{ transform:translateX(4px); } */

.amitabh-banner {
   padding: 25px 0;
   margin: auto;
   width: 70%;
   max-width: 70%;
   }
a:hover {
   color: #23527c;
   }



 

.footer {
      background: #f2f2f2;
      margin: auto;
      padding: 12px 20px;
    }
	
	.line {
	  margin-top: 100px;
	  }

    .line h1 {
      font-size:45px;
      font-weight:500;
      margin-bottom: 10px;
	  margin-left: 5%;
    }
    
	.line h2 {
	  font-size: 14px;
	  margin-left: 5%; 
	  font-weight: 500;
	  color: #000;
	}
	
	.quote-btn {
	  border-radius: 8px;
      float: right;
      margin-top: -10%;
      color: #fff;
      padding: 12px 25px;
      text-decoration: none;
      background: black;
      margin-right: 0%;
	}
	
    p.subtext {
      color: #555;
      margin-bottom: 40px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 40px;
      margin-top: 40px;
    }

    .info-block {
	   margin-left: 20%;
	}

    .info-block h3 {
      font-size: 14px;
      margin-bottom: 5px;
      font-weight: normal;
    }

    .info-block p {
      margin: 5px 0;
	  font-size: 14px;
      word-spacing: 2px;
	  line-height: 25px;
    }

    .info-block a {
      color: #000;
      text-decoration: none;
      font-weight: bold;
    }

    .newsletter {
	  margin-right: 10%;
	}

    .newsletter h3 {
      font-size: 1rem;
	  font-weight: normal;
      margin-bottom: 10px;
    }

    .newsletter input[type="email"] {
      padding: 10px;
      width: 70%;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 10px;
    }

    .newsletter button {
      padding: 10px 20px;
      border: none;
      background: #222;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
    }

    .newsletter button:hover {
      background: #444;
    }

    .newsletter label {
      display: block;
      font-size: 0.9rem;
      margin-top: 10px;
      color: black;
    }

    .social-links {
      margin-top: 20px;
	  line-height: 30px;
    }

    .social-links a {
      margin-right: 15px;
      text-decoration: none;
      color: #000;
      font-weight: bold;
    }

    hr {
      margin: 40px 0;
      border: none;
      border-top: 1px solid #ddd;
    }
	
	.min {
	  min-width: 10px;
	}
	
	:root{
    --muted:#bfbfbf;
    --gap:18px;
    --radius:10px;
    --vh:100vh;
  }
	
/* harry */
  .harry{
    position:relative;
    height:var(--vh);
    width:100%;
    overflow:hidden;
    margin-top: 30px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* background image as a pseudo element so overlaying children are easy */
  .harry::before{
    content:"";
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    transform:scale(1.03);
    filter:contrast(0.95) saturate(0.9);
    z-index:0;
  }

  .overlay{
    position:absolute;
    inset:0;
    z-index:1;
  }

.overlay img {
    width: 100%;
}

  

  /* Bottom-left stats card */
  .stats-card{
    position:absolute;
    left:40px;
    bottom:0px;
    z-index:6;
    background: transparent;
    background-color: #1D1C1D;
    padding:28px 28px;
    display:flex;
    gap:28px;
    align-items:flex-start;
    min-width:320px;
  }
  .stat{
    min-width:150px;
  }
  .stat .num{
  font-size:40px; 
  font-weight:700; 
  color: #fff;
  margin-bottom:8px
  }
  .stat .label{
  font-size:14px; 
  color:var(--muted); 
  line-height:1.3
  }	

/* optional small hover effects */
  .btn-contact:hover{ transform:translateY(-2px) }
  .hamburger:active{ transform:scale(0.98) }

  /* Make harry content center area focusable for future content */
  .hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    /* max-width:1400px; */
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none; /* purely visual */
  }
  
.login-box a {
   background: black;
   color: #fff;
 }
    
	
	
	.root {
  background-color: #f2f2f2;
  border-top: 1px solid #ddd;
  padding: 10px 20px;
  font-size: 14px;
  color: #333;
}

.root-cont {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}


.root-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: -7%;
}

.root-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-right: -10%;
  font-weight: 500;
}

.root a {
  text-decoration: none;
  color: black;
  font-weight: 500;
  margin: 0 5px;
}

.root a:hover {
  text-decoration: underline;
}

.containerr {
    text-align: center;
	margin-top: 100px;
}

.main-text {
    font-size: 37px;
    width: 42%;
    margin: 0 auto;
    font-weight: 400;
}

.main-text .highlight {
    font-style: italic;
    font-weight: 600;
}

.sub-text {
    font-size: 13px;
    text-align: center;
    color: #555;
    margin-top: 15px;
    padding-right: 0px;
}

.link-text {
    font-size: 10px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 8px;
    display: block;
    padding-right: 0px;
}

.wrapper_full {
    max-width: 100%;
	margin-top: 20px !important;
	margin: auto;
   }
   
   .para h2 {
	 font-size: 37px;
   }
   
   .types__inner {
    position: relative;
    padding-top: 52%;
    width: 100%;
   }
   
   .types__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
   
   .types__img {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 transition: opacity 0.5s ease;
	 opacity: 0;
   }
   
   .types__bg:after {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-color: rgba(0, 0, 0, 0.7);
	 transition: opacity 0s ease;
	 opacity: 0;
	 transition-delay: 0.5s;
   }
   
   .types__list {
    font-size: 0;
	text-align: center;
    letter-spacing: 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
	border: 1px solid;
	background: black;
  }
  
  .types__list:before {
	content: '';
	position: absolute;
	top: 0;
	left: calc(100% /3);
	width: 1px;
	height: 100%;
	background-color: rgba(255, 255, 255, 0);
	z-index: 1;
	transition: all 0.5s ease;
  }
  
  .types .card {
	display: inline-block;
	width: calc(100% / 3);
	height: 100%;
	position: relative;
	overflow: hidden;
	backface-visibility: hidden;
	text-decoration: none;
  }
  
  .types .card__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 300%;
	height: 100%;
	z-index: -2;
	transition: opacity 0.5s ease;
  }
  
  
  .bg-b-lazy {
	background-size: cover;
  }
  
  .types .card__mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: -1;
  }
  
  .types .card__content {
	width: 100%;
	text-align: center;
	color: #fff;
	min-height: 62px;
	transition: opacity 0.5s ease;
	position: absolute;
	top: calc(30% - 16px) !important;
	left: 0;
	margin-top: 30px;
	padding: 0 30px;
  }
  
  .types .card_h2 {
	line-height: 36px;
  }
  
  .card__content2 {
	margin-top: 50px;
	text-align: left;
	font-size: 14px;
  }
  
  .line {
	display: block;
	white-space: nowrap;
	overflow: hidden;
  }
  
  .[data-split-letters] .letter {
	 transform: translate3d(0px, 50px, 1px);
  }
  
  .[data-split-letters] {
    opacity: 0;
    overflow: hidden;
    margin-left: -2px;
  }
  
  .h5 {
	font: 300 12px / 12px 'Circle', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 5.7px;
	padding-left: 5px;
	margin: 0;
  }
  
  .line {
	display: block;
	white-space: nowrap;
	overflow: hidden;
  }
  
  .types .card {
	display: inline-block;
	width: calc(100% / 3);
	height: 100%;
	position: relative;
	overflow: hidden;
	backface-visibility: hidden;
	background: transparent;
	text-decoration: none;
  }
  
  .types .card_bg {
	left: -100%;
  }
  
  .types .card_bg {
	position: absolute;
	top: 0;
	width: 300%;
	height: 100%;
	z-index: -2;
	transition: opacity 0.5s;
  }
  
  .types .card_mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: -1;
  }
  
  .types .card_content {
	width: 100%;
	text-align: center;
	color: #fff;
	min-height: 62px;
	transition: opacity 0.5s ease;
	position: absolute;
	top: calc(50% - 16px);
	left: 0;
	padding: 0 30px;
  }
  
  .types .card:nth-of-type(3) .card_bg {
	left: -200%;
  }
  
  .types .card_bg {
	position: absolute;
	top: 0;
	width: 300%;
	height: 100%;
	z-index: -2;
	transition: opacity 0.5s ease;
  }
  
  .types .card__mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: -1;
  }
  
  .types .card__content {
	width: 100%;
	text-align: center;
	color: #fff;
	min-height: 62px;
    font-size: 20px;
	transition: opacity 0.5s ease;
	position: absolute;
	top: calc(50% - 16px);
	left: 0;
	padding: 0 30px;
  }

  .line {
    margin-top: 50px;
    font-weight: 500;
  }
 
  .link-text img {
    vertical-align: middle;
    height: 6px;
  }

  .con {
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 20px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 40px;
    }

    .box h4 {
      font-size: 12px;
      letter-spacing: 1px;
      font-weight: 600;
      color: #555;
      margin-bottom: 15px;
    }

    .box h1 {
      font-size: 37px;
      font-weight: 500;
      margin: 0;
	  letter-spacing: 2px;
      line-height: 1.3;
    }

    .box p {
      font-size: 16px;
      color: #333;
	  font-weight: normal;
	  line-height: 25px;
	  word-spacing: 2px;
      margin-bottom: 20px;
    }

    .box a {
      text-decoration: none;
      color: black;
      font-weight: normal;
      padding-bottom: 2px;
    }
	
	
	.slider {
      width: 100%;
      height: 100vh; /* Full screen height */
      overflow: hidden;
    }
	.video-wrapper {
		display: flex;
		gap: 20px; /* adjust gap as you like */
		margin-left: 10px;
		justify-content: center;
    }
	.video-wrapper iframe {
		width: 560px;
		height: 300px;
	}
		
	.iframe {
	  margin-right: 20px; /* horizontal gap */
	  margin-bottom: 20px; /* vertical gap if we needed */
	}
	.transformation-video_slider iframe {
       width: 100%;
      height: 100vh; /* Full screen video */
      border: none;
	}
	.transformation-video_slider .slick-dotted.slick-slider {
      margin-bottom: -165px !important;
    }

    /* Remove arrows/dots background */
    .transformation-video_slider .slick-prev, .slick-next {
      z-index: 1;
    }

  
	
	.title h1 {
	  font-size: 35px;
	  text-align: center;
	}
	
	.title p {
	   font-size: 14px;
	   text-align: center;
	}
	
    .slider iframe {
      width: 100%;
      height: 100vh; /* Full screen video */
      border: none;
    }
	
	

    /* Remove arrows/dots background */
    .slick-prev, .slick-next {
      z-index: 1;
    }
	
	.rap {
      max-width: 1228px;
	  margin: auto;
	}

	.topCourseInner {
      overflow: hidden; /* clears child floats */
    } 

	.newhd-ing h2 {
    font-size: 18px;
    color: #111;
    text-align: left !important;
    line-height: 22px;
    clear: both;
    font-weight: 500;
   }
	
	.hd-ing {
    margin-bottom: 9px;
	text-align: center;
    }
	
	.topCourseInner {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}

.topCourseInner>a {
	max-width: 33%;
    padding-right: 10px;
    text-align: center;
    display: block;
    float: left;
    width: 33.33%;
}

.topCourseInner * {
    text-align: left;
	text-decoration: none;
}

.topCourseImg {
    float: left;
    position: relative;
}

.topCourseInner * {
    text-align: left;
	max-width: 100%;
	height: auto;
}

.view {
   text-align: center;
   margin-top: 40px;
}

.buttona {
  text-decoration: none;
  color: #ffffff !important;
  font-weight: normal;
  border: 1px solid #000;
  position: absolute !important;
  margin-top: 20px !important;
  padding: 10px 20px !important;
  background-color: #000 !important;
  border-radius: 5px !important;
}

.more {
   text-align: center;
   margin-top: 40px;
}

.black {
  text-decoration: none;
  color: #ffffff !important;
  font-weight: normal;
  border: 1px solid #000;
  padding: 10px 20px !important;
  background-color: #000 !important;
  border-radius: 5px !important;
}

.cob {
   margin-top: 50px;
}

.cob ul {
  font-size: 16px !important;
  font-weight: 100 !important; 
  background: #fff !important;
  color: #111 !important;
  border-radius: 22px !important;
  padding: 24px 24px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  text-align: center !important;
  margin: 0 auto !important;
  line-height: 24px !important;
  position: relative !important;
}

.cola ul {
  font-size: 14px !important;
  float: right;
  bottom: -20px;
  font-weight: 300 !important; 
  background: #fff !important;
  color: #111 !important;
  border-radius: 22px !important;
  padding: 10px 20px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  text-align: center !important;
  line-height: 1.25 !important;
  margin: 0 auto !important;
  position: relative !important;
}


.topCourseInner .topname {
    font-size: 20px;
	color: #000;
}

.short_description_course {
    width: 220px;
    max-width: 100%;
    height: 20px;
    color: #7a7a7a;
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.topCourse .rating {
    float: none;
    width: 100%;
}

.topCoursePrice {
    margin-top: 4px;
}

.topCoursePrice span {
    font-size: 16px;
    color: #484848;
    font-weight: 100;
    display: inline-block;
    margin-right: 10px;
}

.topCoursePrice small.crossed {
    font-size: 13px !important;
    color: #666 !important;
    font-weight: 400 !important;
    margin-right: 6px !important;
	text-decoration: line-through;
}

.down {
   color: black;
   margin-left: -15%;
   font-size: 18px;
}

.up {
	margin-top: 10px;
	font-size: 15px;
}

.content-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.row {
    display: flex;
    justify-content: center;
    margin-top: 30px !important;
	margin-left: 10%;
}

.col-md-4 {
    width: 38%;
}

.login-box h2 {
    font-weight: bold;
	font-size: 39px;
	width: 88%;
}

.login-box p {
    font-size: 19px;
	width: 88%;
    color: #333;
}

.btn-dark {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: black;
    color: #fff;
    border: 0;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
    transition: transform .12s 
ease, box-shadow .12s 
ease, background .12s 
ease;
    font-size: 15px;
}

.col-md-4 {
    width: 38%;
}

img.content-image {
    max-width: 85% !important;
    border-radius: 8px;
}
 
.review {
      max-width: 600px;
      padding: 20px;
      border: 1px solid black;
      margin: auto;
    }

    .review-title {
      color: #d63031;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .review-content {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: #333;
      font-size: 15px;
      line-height: 1.6;
    }

    .review-content img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      object-fit: cover;
    }

    .review-text {
      flex: 1;
    }

    .review-text span {
      color: red;
      font-size: 16px;
    }

    .review-f {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
    }

    .review-footer .name {
      font-weight: bold;
      font-size: 14px;
    }

    .stars {
      color: gold;
      font-size: 18px;
    }

    .read-more {
      color: #d63031;
      font-size: 14px;
      text-decoration: none;
    }
    .read-more:hover {
      text-decoration: underline;
    }	
	
	.card__content ul {
	  color: #fff;
      padding: 0;
      font-size: 20px;
      margin: -35px;
      font-weight: bold;
      margin-top: 10px;
      text-align: center;
	}
	
	
	
	
   .google {
    width:100%;
    max-width:var(--maxW);
  }

  .badges {
    display:flex;
    gap:28px;
    justify-content:center;
    align-items:flex-start;
	  margin-top: 50px;
    flex-wrap:wrap; /* allows wrapping on smaller screens */
  }

  .crd1 {
    border-radius:12px;
    padding:10px;
    text-align:center;
    color:var(--muted);
  }
  
  .crd2 {
    border-radius:12px;
    padding:28px;
    text-align:center;
    color:var(--muted);
  }
  
  .crd3 {
    border-radius:12px;
    padding:8px;
    text-align:center;
    color:var(--muted);
  }

  .log1 {
    font-weight:700;
    font-size:48px;
    color:var(--accent);
    letter-spacing:1px;
  }
  .log2 {
    font-weight:700;
    font-size:48px;
    color:#111;
    letter-spacing:1px;
	  margin-top: -18px;
  }
  .log3 {
    font-weight:700;
    font-size:48px;
    color:var(--accent);
    letter-spacing:1px;
  }
  .tagline {
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.6px;
    color:rgba(255,255,255,0.65);
    margin-bottom:14px;
  }

  .stars1 {
    display:flex;
    justify-content:center;
    gap:6px;
    margin-bottom:12px;
  }
  
  .stars2 {
    display:flex;
    justify-content:center;
    gap:6px;
    margin-bottom:12px;
  }
  
  .stars3 {
    display:flex;
    justify-content:center;
    gap:6px;
    margin-bottom:12px;
  }
  
  /* small star svg styling */
  .stars1 svg{ width:26px; height:26px; display:block; }
  
  /* small star svg styling */
  .stars2 svg{ width:26px; height:26px; display:block; }
  
  /* small star svg styling */
  .stars3 svg{ width:26px; height:26px; display:block; }

  .rating {
    font-weight:700;
    margin-bottom:4px;
    color:#111;
  }

  .customer {
    font-size:14px;
    color: #111;
  }
  
  .log1 img {
	width: auto;
	height: 100px;
  }
  
  .log2 img {
	width: auto;
	height: 100px;
  }
  
  .log3 img {
	width: auto;
	height: 100px;
  }
  
  .cric {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: #eb4019;
}

.sport {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-gap: 15px;
  margin: 20px;
}

.helmet {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-gap: 15px;
  margin: 20px;
}

.helmet img {
  width: 400px;
  height: auto;
  margin-left: -20%;
  border-radius: 8px;
  object-fit: cover;
}

.sport img {
  width: 400px;
  height: auto;
  margin-left: -37%;
  border-radius: 8px;
  object-fit: cover;
}

.social {
  text-align: center;
  color: white;
  max-width: 556px;
  margin: 84px;
}

.social h1 {
  font-size: 60px;
  font-weight: bold;
  margin-bottom: 10px;
}

.social p {
  font-size: 18px;
  margin-bottom: 20px;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.button {
  text-decoration: none;
  color: #ffffff !important;
  font-weight: normal;
  border: 1px solid #000;
  padding: 10px 20px !important;
  background-color: #000 !important;
  border-radius: 5px !important;

}

.btn:hover {
  background: #ddd;
}