:root {
  --pop-reg: "Poppins-Regular";
  --pop-med: "Poppins-Medium";
  --fig-reg: "FigtreeRegular";
  --fig-med: "FigtreeMedium";
  --fig-italic: "FigtreeItalic";
  --fig-med-italic: "FigtreeMediumItalic";
  --libre-italic: "LibreBodoniItalic";
  --libre-meditalic: "LibreBodoniMediumItalic";
  --libre-semiitalic: "LibreBodoniSemiBoldItalic";
  --libre-bolditalic: "LibreBodoniBoldItalic";
  --primary-color: #297edf;
  --font-1: #111214;
  --font-2: #393b40;
  --font-3: #40444a;
  --border-100: #e4e7e9;
}
a {
  text-decoration: none !important;
}
body {
  font-family: var(--fig-reg);
}
/* Navbar */
.TE-locks-nav .collapse {
    margin-bottom: 24px;
}
.TE-locks-nav .navbar-brand img {
  width: 200px;
  height: 32px;
  object-fit: contain;
}
.TE-locks-nav .navbar-nav {
  display: flex;
  align-items: center;
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid #e4e7e9;
  box-shadow: 0px 2px 16px 1px rgba(137, 126, 240, 0.12);
  border-radius: 24px;
}
.TE-locks-nav .navbar-nav li .nav-link {
  font-family: var(--fig-reg);
  font-size: 32px;
  line-height: 48px;
  padding: 24px 12px;
  color: var(--font-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.TE-locks-nav .navbar-nav li:hover .label-icon {
  box-shadow: 4px 4px 0px rgba(39, 109, 206, 0.24);
}
.TE-locks-nav .navbar-nav li .active {
  background: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: 4px 4px 0px rgba(39, 109, 206, 0.24);
  color: #ffffff;
}
.nav-link .label-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 8px;
  background-color: #ffffff;
  border: 1px solid var(--border-100);
  box-shadow: 0px 2px 16px 1px rgba(137, 126, 240, 0.12);
  border-radius: 20px;
  color: var(--font-3);
  transition: 0.2s ease-in;
}
.nav-link .label-icon i {
  font-size: 42px;
}
#nav-menu {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
}
.navbar-fixed {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.navbar-toggler-icon .menu-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: 0px 4px 4px rgba(17, 18, 20, 0.24),
    inset 0px 2px 4px rgba(17, 18, 20, 0.24);
  border-radius: 12px;
  color: var(--primary-color);
}
.navbar-toggler-icon .menu-text {
  font-family: var(--fig-med);
  font-size: 18px;
  line-height: 28px;
  color: #ffffff;
}
/* nav bar toggle */
.TE-locks-nav .navbar-nav {
  align-items: baseline;
}
.TE-locks-nav .navbar-collapse {
  margin-top: 16px;
  padding: 4px 12px 12px 12px;
  background-color: #fafbff;
  border-radius: 16px;
  border: 1px solid #d6e2ff;
}
.TE-locks-nav .navbar-toggler:focus {
  box-shadow: none;
}
.TE-locks-nav .navbar-toggler {
  padding: 6px 10px 6px 6px;
  background-color: var(--primary-color);
  border-radius: 18px;
}
.navbar-button {
  background-image: none !important;
  height: auto;
  color: #ffffff;
  font-family: var(--fig-med);
}
.TE-locks-nav .menu-bar .navbar-toggler-icon i {
  color: var(--primary-color);
  font-size: 24px;
}
.TE-locks-nav .navbar-collapse .nav-item {
  margin-top: 8px;
}
/* nav bar toggle */
/* Navbar */

/* Hero Section */
.section-content {
  padding: 72px 0px;
  border-radius: 24px;
  background: linear-gradient(
    108.38deg,
    rgba(224, 196, 252, 0.1) -1.54%,
    rgba(144, 198, 253, 0.1) 102.28%
  );
  border: 1px solid #ffffff;
  overflow: hidden;
}
.pro-overview {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.16);
  border-width: 2px 2px 0px 2px;
  border-style: solid;
  border-color: #ffffff;
  box-shadow: 0px 4px 8px 1px rgba(127, 114, 240, 0.16);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  width: fit-content;
}
.pro-overview span {
  font-family: var(--fig-reg);
  font-size: 24px;
  line-height: 38px;
  color: var(--font-2);
}
.hero-title-content h1 {
  font-family: var(--libre-bolditalic);
  font-size: 44px;
  line-height: 58px;
  background: linear-gradient(90deg, #af77e6 0%, #5760e6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-title-content .sub-title {
  color: var(--font-3);
  font-family: var(--fig-reg);
  font-size: 24px;
  line-height: 38px;
}
.hero-title-content .highlight {
  font-family: var(--libre-meditalic);
  font-size: 28px;
  color: var(--primary-color);
}
.main-button {
  padding: 10px 20px;
  background-color: var(--primary-color);
  border: 1px solid #ffffff;
  box-shadow: 0px 2px 6px rgba(24, 49, 79, 0.16),
    inset 0px 4px 6px rgba(24, 49, 79, 0.2);
  border-radius: 16px;
  font-family: var(--pop-reg);
  font-size: 20px;
  line-height: 32px;
  color: #ffffff;
}
.main-button:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  border-color: #ffffff;
}
.main-button:active {
  border-color: var(--primary-color);
}
.banner-image {
  position: relative;
}
.banner-image .lock-img {
  z-index: 1;
}
.banner-image .stage {
  position: absolute;
  width: 80%;
  bottom: -300px;
  z-index: 0;
}
/* Hero Section */

/* Lock Works */
.gradiant-bg {
  background: linear-gradient(180deg, #fad0c4 0%, #ffd1ff 100%);
}
.white-bg {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 32px;
}
.sub-sec-title-content h1 {
  font-family: var(--pop-reg);
  color: var(--font-2);
  font-size: 30px;
  line-height: 58px;
}
.sub-sec-title-content h1 .text-highlight {
  font-family: var(--libre-italic);
  background: linear-gradient(to right, #f47ea5, #f6ad77);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 40px;
  line-height: 58px;
  letter-spacing: 0.2px;
  margin-bottom: 0px;
}
.sub-sec-title-content p {
  font-family: var(--fig-italic);
  color: var(--font-3);
  line-height: 32px;
  font-size: 20px;
  margin-bottom: 0px;
}
.process {
  background: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: 0px 2px 6px rgba(151, 71, 255, 0.16);
  border-radius: 20px;
}
.process h6 {
  font-family: var(--pop-med);
  font-size: 18px;
  line-height: 28px;
  color: var(--font-2);
}
.process p {
  font-family: var(--fig-reg);
  font-size: 16px;
  line-height: 26px;
  color: var(--font-3);
}
/* Lock Works */

/* Features */
.features {
  border-radius: 32px;
}
.features .bento-grid {
  background-color: #ffffff;
  border-radius: 24px;
}
.feature-icon {
  padding: 6px;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 24px;
  margin-bottom: 16px;
}
.feature-icon span {
  padding: 10px;
  background: #ffffff;
  border: 0.5px solid #e4e7e9;
  box-shadow: 0px 2px 6px rgba(127, 114, 240, 0.16);
  border-radius: 18px;
  width: fit-content;
}
.feature-icon i {
  font-size: 32px;
}
.bento-item .bento-content {
  color: #fff;
}
.bento-content h6 {
  font-family: var(--libre-semiitalic);
  font-size: 30px;
  line-height: 48px;
}
.bento-content p {
  font-family: var(--fig-italic);
  font-size: 20px;
  line-height: 32px;
}
.bento-item .quotation {
  position: absolute;
  width: 36px;
}
.bento-item .open {
  left: 16px;
  top: 16px;
}
.bento-item .close {
  right: 16px;
  bottom: 16px;
}
.bento-item {
  padding: 36px 8px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  height: 100%;
}
.passcode {
  background-image: url(../images/features/passcode.png);
}
.alarm {
  background-image: url(../images/features/alarm.png);
}
.multi-user {
  background-image: url(../images/features/multi-user.png);
}
.tamper {
  background-image: url(../images/features/tamper.png);
}
.weather {
  background-image: url(../images/features/weather.png);
}
.charge {
  background-image: url(../images/features/charge.png);
}
/* Features */

/* Use Case */
.tab-component .tab-bar {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 8px;
  gap: 8px;
  background: #f5f6f6;
  border-radius: 28px;
  width: fit-content;
}
.tab-component .tab-bar .nav-link {
  padding: 12px 24px;
  border-radius: 20px;
  font-family: var(--fig-med);
  font-size: 24px;
  line-height: 38px;
  color: var(--font-3);
}
.tab-component .tab-bar .nav-link.active {
  background: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: 0px 1px 2px 1px rgba(22, 19, 41, 0.1);
}
.tab-bg {
  border-radius: 32px;
}
.tab-component .tab-content {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 24px;
}
.tab-title h5 {
  font-family: var(--libre-meditalic);
  font-size: 32px;
  line-height: 42px;
  color: var(--font-1);
}
.tab-title img {
  width: 400px;
  height: auto;
  margin-bottom: 16px;
}
.scenario {
  padding: 8px;
  background: linear-gradient(180deg, #f5f6f6 0%, #f9fafa 100%);
  border-radius: 20px;
}
.scenario img {
  border: 2px solid #ffffff;
  box-shadow: 0px 4px 8px rgba(127, 114, 240, 0.16);
  border-radius: 16px;
  width: 100%;
}
.scenario .content {
  font-family: var(--fig-med);
}
.scenario .content h6 {
  font-size: 28px;
  line-height: 42px;
  color: var(--font-1);
}
.usecase.flex {
  display: flex;
  gap: 8px;
}
.scenario .usecase span {
  font-size: 16px;
  line-height: 24px;
  color: var(--font-2);
}
.scenario .img-set {
  height: 306px;
  object-fit: cover;
}
/* Use Case */

/* Testimonial */
.testimonial {
  padding: 32px;
  background: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0px 4px 16px rgba(23, 21, 41, 0.06);
  border-radius: 24px;
}
.testimonial .profile img {
  border: 2px solid #ffffff;
  box-shadow: 0px 4px 8px rgba(23, 21, 41, 0.16);
  border-radius: 24px;
}
.testimonial .profile h6 {
  font-family: var(--pop-reg);
  font-size: 24px;
  line-height: 38px;
  color: var(--font-2);
}
.testimonial .profile span {
  font-family: var(--fig-reg);
  font-size: 20px;
  line-height: 24px;
  color: var(--font-3);
}
.message p {
  margin-bottom: 0px;
  font-family: var(--fig-italic);
  font-size: 20px;
  line-height: 32px;
  color: var(--font-2);
}

/* Footer */
.footer {
  background-color: #f5f6f6;
}
.footer-logo img
{
  width: 100%;
  height: 48px;
  object-fit: contain;
}
.footer-menu .nav-link
{
  font-family: var(--fig-reg);
  font-size: 18px;
  color: var(--font-2);
}
.copyrights p
{
  font-family: var(--fig-reg);
  font-size: 16px;
  color: var(--font-2);
}
.contact-options a
{
  color: var(--font-2);
  font-family: var(--fig-reg);
  font-size: 16px;
}
/* Footer */

/* Blog */
.blog-card {
  border-radius: 16px;
  padding: 8px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  border: 1px solid #f6f6f6;
  box-shadow: 0px 2px 8px rgba(41, 115, 199, 0.1);
}
.blog-card img {
  width: 100%;
  height: 260px;
  border-radius: 8px;
  margin-bottom: 16px;
  object-fit: cover;
}
.blog-card .overview-content .text-content h5 {
  font-family: var(--pop-med);
  font-size: 20px;
  color: #222222;
  margin-bottom: 8px;
  line-height: 30px;
}
.blog-card .overview-content .text-content p {
  font-family: var(--pop-reg);
  font-size: 16px;
  color: #222222;
  margin-bottom: 0px;
  text-align: left;
  line-height: 26px;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-card .overview-content .text-content .line {
  border: 1px solid #ebebeb;
  width: 100%;
}
.blog-card .overview-content .date-readmore {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blog-card .overview-content .date-readmore span {
  font-family: var(--pop-reg);
  font-size: 16px;
  color: #222222;
}
.secondary-button .btn {
  font-family: var(--pop-reg);
  font-size: 16px;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 100px;
  background-color: #ffffff;
  padding: 8px 16px;
}
.secondary-button .btn:hover {
  box-shadow: 4px 4px #add4ff;
  transition: 0.3s ease-in;
  background-color: #e5f2ff;
}
.secondary-button .btn:active {
  box-shadow: 4px 4px #173f75;
  background-color: #2973c7;
  color: #fff;
}
.overview-content .seperation-line {
  border: 1px solid #cccccc;
  margin: 10px 0px;
}
.blog-page {
  margin-top: 24px;
  margin-bottom: 24px;
  background-color: #ffffff;
  box-shadow: 0px 4px 10px rgba(219, 219, 219, 0.4);
  padding: 24px;
  border-radius: 8px;
}
.blog-content h1 {
  font-family: var(--pop-med);
  font-size: 32px;
  color: #2b2b2b;
  margin-bottom: 16px;
}
.blog-content p {
  font-family: var(--pop-reg);
  font-size: 16px;
  color: #2b2b2b;
  line-height: 26px;
}
.blog-content h4 {
  font-family: var(--pop-med);
  font-size: 20px;
  color: #2b2b2b;
  margin-bottom: 12px;
  margin-top: 24px;
}
.blog-list-content p {
  margin-bottom: 12px;
}
.blog-list-content {
  margin-bottom: 0px;
}
.blog-list-content li {
  margin-bottom: 8px;
  font-family: var(--pop-reg);
  font-size: 16px;
  color: #333333;
}
.blogcontent-img img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 6px;
}
/* Blog */

/* Contact */
.cont-img {
  padding: 8px;
  border-radius: 24px;
  border: 1px solid #e6e6e6;
}
.cont-img img {
  width: 100%;
  border-radius: 16px;
  height: 394px;
  object-fit: cover;
}
.cont-medium {
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 16px;
  background-color: #fafafa;
  border: 1px solid #e6e6e6;
  padding: 16px;
  transition: 0.2s ease-in;
}
.cont-medium i {
  font-size: 18px;
  padding: 12px;
  border-radius: 100px;
  background-color: #f0f0f0;
  color: #222222;
  margin-bottom: 16px;
}
.cont-medium span {
  font-size: 16px;
  color: #222222;
  font-family: var(--pop-reg);
}
.cont-medium #location-icon {
  padding: 11px 13px;
}
.cont-form h4 {
  font-size: 30px;
  color: #020330;
  margin-bottom: 16px;
}
.cont-hover:hover {
  background-color: #ffffff;
  border: 1px solid #2973c7;
}
.text-fields .cont-form-field .form-control {
  color: #222222;
  font-size: 16px;
  font-family: var(--pop-reg);
}
.text-fields .cont-form-field .form-control:focus {
  box-shadow: none;
}
.text-fields .cont-form-field label {
  font-family: var(--pop-reg);
  color: #393939;
}
.text-fields .cont-form-field label .mandatory {
  color: #dc3545;
}
.text-fields .cont-form-field label::after {
  background-color: transparent !important;
}
.text-fields .primary-button {
  text-align: end;
}
/* Contact */

/* Terms and Conditions & Privacy Policy */
.page-content h5 {
  font-family: var(--pop-med);
  color: #1a1a1a;
  font-size: 24px;
}
.page-content p {
  font-family: var(--pop-reg);
  color: #222222;
  font-size: 16px;
  line-height: 26px;
}
.page-content ul li {
  font-family: var(--pop-reg);
  color: #222222;
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 10px;
}
/* Terms and Conditions & Privacy Policy */

/* Page up */
.page-up {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px;
  position: fixed;
  width: 48px;
  height: 48px;
  bottom: 30px;
  right: 30px;
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 16px;
  color: #ffffff;
  cursor: pointer;
  transition: padding 0.2s ease-in;
}
.page-up:hover {
  padding-top: 4px;
  padding-bottom: 12px;
}
/* Page up */

/* Product */
.lock-product a
{
  color: var(--font-2);
  font-family: var(--fig-reg);
  font-size: 16px;
}
.lock-variant h4
{
  font-family: var(--fig-med);
  font-size: 24px;
  line-height: 38px;
  color: var(--font-2);
}
.lock-variant p
{
  font-family: var(--fig-reg);
  font-size: 18px;
  line-height: 28px;
  color: var(--font-3);
}
.product-banner img
{
    width: 100%;
    border-radius: 24px;
    height: 520px;
    object-fit: contain;
    margin-bottom: 24px;
}
.lock-product
{
    position: relative;
}
.lock-product .lock-variant
{
    padding: 16px;
    border-radius: 24px;
    border: 1px solid #F6F6F6;
    box-shadow: 0px 2px 8px rgba(41, 115, 199, 0.1);
    cursor: pointer;
}
.lock-product .lock-variant img
{
    width: 100%;
    height: 260px;
    object-fit: contain;
    margin-bottom: 24px;
}
.lock-product .lock-variant h4
{
    font-family: 'WorkSansMedium';
    color: #020330;
    font-size: 24px; 
}
.lock-product .lock-variant p
{
    font-family: 'Poppins-Regular';
    color: #222222;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0px;
}
@keyframes rotate
{
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}
.rotating-box
{
    display: flex;
    justify-content: center;
    align-items: center;
    /* animation: rotate 6s linear infinite; */
    position: absolute;
    top: 70px;
    left: 100px;
    z-index: -1;
    width: 50%;
    height: auto;
}
.lock-product .lock-variant .rotating-box img
{
    width: 100%;
    height: auto; 
    opacity: 0.16;
}
.lock-variant .rotating-box img
{
    transition: 0.3s all linear;
}
.lock-variant:hover .rotating-box img
{
    transform: scale(1.2);
    transition: 0.3s all linear;
    opacity: 0.32;
}
.lock-variant .secondary-button
{
    text-align: end;
    margin-top: 16px;
}
.lock-feature
{
    padding: 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    border: 1px solid #F6F6F6;
    box-shadow: 0px 2px 8px rgba(41, 115, 199, 0.1);
}
.lock-feature img
{
    width: 68px;
    height: 68px;
    object-fit: contain;
    margin-right: 16px;
}
.lock-feature .feature-desc h5
{
    font-family: 'Poppins-Medium';
    font-size: 24px;
    color: #020330;
}
.lock-feature .feature-desc p
{
    font-family: 'Poppins-Regular';
    font-size: 16px;
    line-height: 26px;
    color: #222222;
    margin-bottom: 0px;
}
/* Product */
/* Product */

/* About Us*/
.aboutus-banner img
{
    width: 100%;
    border-radius: 24px;
    height: 640px;
    object-fit: cover;
    margin-bottom: 24px;
}
.subpage-text p
{
    font-family: var(--pop-reg);
    font-size: 18px;
    color: #222222;
    line-height: 30px;
}
.subpage-text .text-highlight
{
    color: #3981E5;
    font-size: 28px;
    font-family: var(--pop-med);
}
.container-bg
{
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FF 100%, #EBF1FF 100%);
    border-radius: 24px;
}
.about-content
{
    margin-bottom: 15px;
    border-radius: 16px;
    border: 2px solid #FFFFFF;
    padding: 16px;
    display: flex;
}
.about-content h4
{
    font-family: var(--fig-med);
    font-size: 30px;
}
.about-content p
{
    font-family: var(--pop-reg);
    color: #222222;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0px;
}
.about-content img
{
    width: 100%;
    height: 200px;
    object-fit: contain;
}
.core-values
{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid #EBEBEB;
}
.core-values img
{
    width: 100%;
    height: 80px;
    object-fit: contain;
    margin-bottom: 24px;
}
.core-values h4
{
    font-family: var(--pop-med);
    font-size: 20px;
    margin-bottom: 0px;
    color: #020330;
}
.subpage-headline h3
{
  font-family: var(--fig-med);
  font-size: 32px;
  color: var(--font-2);
  margin-bottom: 16px;
  text-align: center;
}
.subpage-headline p
{
  font-size: 18px;
  font-family: var(--pop-reg);
  color: var(--font-3);
  text-align: center;
}
/* About us */

.padd-4 {
  padding-top: 4%;
  padding-bottom: 4%;
}
.text-color
{
  color: var(--font-2);
}

/* smart-sub-section */
.sub-sec-title-content h1
{
  font-family: var(--pop-reg);
  color: #393B40;
  font-size: 30px;
  line-height: 58px;
}
.sub-sec-title-content h1 .text-highlight
{
  font-family: var(--libre-italic);
  background: linear-gradient(to right, #f47ea5, #f6ad77);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 40px;
  line-height: 58px;
  letter-spacing: 0.2px;
  margin-bottom: 0px;
}
.sub-sec-title-content p
{
 font-family: var(--fig-italic);
 color: #40444A;
 line-height: 32px;
 font-size: 20px;
 margin-bottom: 0px;
}

/* card */
.smart-features .smart-icon i
{
border: 0.5px solid #FFFFFF;
box-shadow: 0px 2px 6px 1px rgba(27, 86, 253, 0.24);
border-radius: 20px;
background: rgba(27, 86, 253, 0.04);
color: #557EF0;
font-size: 34px;
padding: 8px;
}
.smart-features .smart-icon
{
  display: inline-block;
}
.smart-features h3
{
  font-family: var(--pop-med);
  font-size: 20px;
  color: #393B40;
  line-height: 32px;
  margin-bottom: 0px;
}
.smart-features p
{
  font-family: var(--fig-italic);
  font-size: 16px;
  color: #393B40;
  line-height: 26px;
  margin-bottom: 0px;
}
.smart-features
{
  border: 1px solid #F5F6F6;
  box-shadow: 0px 2px 6px rgba(143, 135, 255, 0.12);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  gap: 8px;
  width: 100%;
  background-color: #fff;
}
.one-touch i
{
  background: rgba(246, 182, 57, 0.16) !important;
  box-shadow: 0px 2px 6px 1px rgba(240, 201, 125, 0.24) !important;
  color: #F0BF60 !important;
}
.access i
{
  background: rgba(248, 151, 68, 0.08) !important;
  box-shadow: 0px 2px 6px 1px rgba(239, 170, 110, 0.24) !important;
  color: #DB9C65 !important;
}
.tech i
{
  background: rgba(130, 215, 45, 0.16) !important;
  box-shadow: 0px 2px 6px 1px rgba(153, 196, 124, 0.24) !important;
  color: #74BA46 !important;
}
.smart-lock-img img
{
  width: 80%;
  height: auto;
}
/* smart-sub-section */
.card-1
{
  margin-bottom: 15%;
}
.card-2
{
  margin-left: 10%;
}
.card-3
{
  margin-bottom: 15%;
}
.card-4
{
  margin-left: -10%;
}
.content-row-sapce
{
  margin: 5% 0%;
}

/* Unmatched Durability */
.durability .smart-lock-img img
{
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 4px 12px 1px rgba(127, 114, 240, 0.14);
    border-radius: 40px;
    height: 620px;
    width: 100%;
    object-fit: cover;
    padding: 8px;
}
.durability .smart-lock-img
{
  margin-bottom: 16px;
}
.unmatched-durability
{
  padding: 5% 0%;
  background-color: #F5F6F6;
}
.p-5p
{
  padding: 5% 0%;
}
/* Unmatched Durability */

/* Modern Intelligence */
.m-intelligence
{
  background: linear-gradient(180deg, #E0C3FC 0%, #8EC5FC 100%), #FFFFFF;
  border-radius: 24px;
  padding: 10px 10px;
  margin: 0% 5%;
}
.no-padding
{
  padding: 0px 0px !important;
}
.m-intelligence .smart-lock-img img
{
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 4px 12px 1px rgba(127, 114, 240, 0.14);
    border-radius: 30px;
    height: 510px;
    width: 100%;
    object-fit: cover;
    padding: 8px;
}
.m-intelligence .smart-features
{
  border: 1px solid #F5F6F6;
    box-shadow: 0px 2px 6px rgba(143, 135, 255, 0.12);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    gap: 8px;
    width: 100%;
    background-color: #fff;
}
.dot-line
{
  border-bottom: 1px dashed #ffffff;
  margin-bottom: 20px;
}
/* Modern Intelligence */
.lock-product .lock-variant h4
{
    font-family: var(--fig-med);
    color: #020330;
    font-size: 24px; 
}