@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/WorkSans-Thin.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 100; font-display: swap; src: url("../fonts/WorkSans-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/WorkSans-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 200; font-display: swap; src: url("../fonts/WorkSans-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/WorkSans-Light.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/WorkSans-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/WorkSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/WorkSans-Italic.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/WorkSans-Medium.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/WorkSans-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/WorkSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/WorkSans-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/WorkSans-Bold.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/WorkSans-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/WorkSans-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/WorkSans-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/WorkSans-Black.ttf") format("truetype"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/WorkSans-BlackItalic.ttf") format("truetype"); }

:root {
    --color-wood-50: #fcf3f9;
--color-wood-100: #fbe8f5;
--color-wood-200: #f9d1ec;
--color-wood-300: #f5acdb;
--color-wood-400: #ee78c1;
--color-wood-500: #e54fa7;
--color-wood-600: #d32f88;
--color-wood-700: #b6206c;
--color-wood-800: #971d5a;
--color-wood-900: #7e1d4d;
--color-wood-950: #590c32;
}
body {
    font-family: "Work Sans", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.025em;
    color: #0e0e11;
}

.hero-section {
    background: url(../images/alpha-hero.webp) no-repeat center center;
    background-size: cover;
    border-radius: 0px 0px 50px 50px;
   
}

header { padding-top: 20px;}

nav ul li { padding:5px;}
nav ul li a { color: #fff!important; padding:5px 15px!important; border-radius: 100px; font-weight: 500!important;}
nav ul li a:hover { background: #ffffff2a;}

.nav-call { display: flex; align-items: center;background: #ffffff2a; color: #fff; text-decoration: none; line-height: 1; gap: 10px; text-align: right; padding:5px 5px 5px 20px; border-radius: 100px;}
.nav-call:hover { background: #ffffff2a;}
.nav-call small {display: block;}
.nav-call span { font-weight: 500; font-size: 1.5rem;}


.banner-top { font-size: .875rem; color: #fff; font-weight: 500; }
.banner-main { font-size: 2rem; font-weight: bold; color: #fff; padding:20px 0px}
.banner-main span { background: #ffffff2a; padding:10px; border-radius: 100px; backdrop-filter: blur(5px);display: inline-block;    line-height: 1;}
.banner-para { color: #fff;}
.get-in-touch { background: var(--color-wood-900); background: linear-gradient(70deg, var(--color-wood-700) 0%, var(--color-wood-900) 100%); display: inline-block; padding:10px 30px; border-radius: 100px; color:#fff; text-decoration: none; font-weight: 600; font-size: 1.1rem; margin-top: 30px;} 

.pt-banner { padding: 10% 0px;}

.highlight-text { color: var(--color-wood-900); text-transform: uppercase; font-weight: 600; 
  background: linear-gradient(135deg, var(--color-wood-800) 0%, var(--color-wood-900) 50%, var(--color-wood-950) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;}

  .dt-box { padding:0px 30px; max-width: 600px; color: #fff; margin:0px auto; }
 .dt-box h3 { font-weight: 700;}
.dt-box ul {padding:0px}
.dt-box ul li { list-style: none; position: relative; padding:5px 0px 5px 30px;}
.dt-box ul li::before { content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") no-repeat center;
  background-size: contain;
  position: absolute;
  left:0;
  top:10px;

}
.tt li::before { 
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") no-repeat center !important;

}

.feature { display: flex; gap:20px; } 
.feature img { width:60px; height: 60px; background: var(--color-wood-50); padding:10px; border-radius: 100px;}
.feature h5 { font-weight: 700;}




footer { background: #0f0f0f; color: #fff; border-radius: 50px 50px 0px 0px; padding:10rem 0 5rem;}
footer h5 { color: #ffffff80; font-size: .875rem; text-transform: uppercase;}
footer ul {padding:0px;}
footer ul li {list-style: none; padding:5px 0px;}
footer ul li a { color: #fff; text-decoration: none; transition: all ease-out .2s;}
footer ul li a:hover { color: var(--color-wood-800); transition: all ease-in .2s;}
.contact-link { display: flex; gap:15px; text-decoration: none; line-height: 1; align-items: center; margin-bottom: 15px;}
.iconn { width: 50px; height: 50px; background: #ffffff38; border-radius: 100px; display: flex; align-items: center; justify-content: center; padding:15px; color: #fff;}
.contact-link small { display: flex; color: #ffffff80; font-size: .875rem; text-transform: uppercase;}
.contact-link span {color: var(--color-wood-900); font-weight: 600; 
  background: linear-gradient(135deg, var(--color-wood-600) 0%, var(--color-wood-700) 50%, var(--color-wood-800) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; margin-top: 10px; display: block; font-size: 1.1rem;}

  .twu { background: #590c334b; padding:10px 10px 10px 30px; border-radius: 100px; text-decoration: none; color: var(--color-wood-600); font-size: 1.4rem; text-transform: uppercase; margin-top: 20px; display: inline-flex; gap:10px;}
 .twu span { background: var(--color-wood-950); padding:5px; display: inline-flex; height:40px; width:40px; border-radius: 100px; align-items: center; justify-content: center; }

.products { width: 80px;height: 80px; box-shadow: 0px 2px 3px #3333332a; padding:15px; border-radius: 100px; display: flex; align-items: center; justify-content: center; margin:0px auto;}
.products img { max-width: 30px; width: 100%;}


.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* responsive */
  gap: 20px;
  margin-top: 40px;
  justify-items: center;
  cursor: pointer;
}

.products img {
  width: 80px;
  height: auto;
  transition: transform 0.3s ease;
}

.products:hover img {
  transform: scale(1.1);
  
}

.menu-trigger { background: #ffffff2a; border:2px solid #ffffff21; border-radius: 100px; color: #fff; padding:10px; display: inline-flex;}
.contact-box {box-shadow: 0px 2px 3px #3333332a; border-radius: 1.3rem; padding:20px; height: 100%; text-align: center;}
.contact-box svg {color: var(--color-wood-900); 
  background: linear-gradient(135deg, var(--color-wood-800) 0%, var(--color-wood-900) 50%, var(--color-wood-950) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;}
.contact-icon { background: #f7f7f7; display: inline-block; padding:20px; border-radius: 100px; line-height: 1; margin-bottom: 20px; }
.contact-box h5 { color: #0000008a; font-weight: 600; text-transform: uppercase; font-size: .755rem;}
.contact-box p { color: var(--color-wood-900); 
  background: linear-gradient(135deg, var(--color-wood-800) 0%, var(--color-wood-900) 50%, var(--color-wood-950) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; font-weight: 600;}


@media screen and (max-width:767px) {

    .hero-section { border-radius: 0px 0px 25px 25px;}
    .pt-banner { padding:20% 0;}
    .dt-box { padding:0px;}

    .feature {
    display: flex
;
flex-direction: column;
text-align: center;
    gap: 20px;
}

footer { border-radius: 25px 25px 0px 0px;}

.mob-menu { padding:0px;}
.mob-menu li { list-style: none; padding:5px;}
.mob-menu li a { text-decoration: none; font-size: 1rem; font-weight: 500; padding:10px;display: block; border-radius: 100px; color: var(--color-wood-950);}

.mob-call { background: linear-gradient(135deg, var(--color-wood-800) 0%, var(--color-wood-900) 50%, var(--color-wood-950) 100%); justify-content: center;}
.mob-call:hover {background: linear-gradient(135deg, var(--color-wood-900) 0%, var(--color-wood-800) 50%, var(--color-wood-950) 100%);}





}