/*
    This file won't be overwritten by updates, so you can put custom code here.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap');

:root {
  --primary-color: #00A1FF; /* Primary green */
  --secondary-color: #FF9800; /* Accent orange */
  --background-color: #f9f9f9; /* Light background */
  --text-color: #333; /* Dark text */
  --heading-font: 'Poppins', sans-serif;
  --body-font: 'Roboto', sans-serif;
  --base-spacing: 1rem;
}

/* General Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu,
nav, output, ruby, section, summary, time,
mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

/* Body Base Styles */
body {
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--primary-color);
  margin-bottom: calc(var(--base-spacing) / 2);
  font-weight: 700;
}

p {
  margin-bottom: var(--base-spacing);
  color: var(--text-color);
}

/* Links */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: var(--secondary-color);
}



/* Utility Classes */
.float-right {
  float: right;
}

.float-left {
  float: left;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Layout Containers */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--base-spacing);
}


/* Buttons */
button {
  font-family: var(--body-font);
  font-size: 1rem;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: var(--secondary-color);
}

/* Lists */
ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Forms */
input, textarea, select {
  font-family: var(--body-font);
  font-size: 1rem;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  width: 100%;
  margin-bottom: var(--base-spacing);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.5);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--base-spacing);
}

td, th {
  border: 1px solid #ddd;
  padding: 0.75rem;
  text-align: left;
}

.tools .tool {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.tools .tool:hover {
    transform: translateY(-4px) scale(1.02);

}





/* Responsive Design */
@media (max-width: 768px) {
  .container {
    padding: 0 calc(var(--base-spacing) / 2);
  }

  h1 {
    font-size: 1.8rem;
  }
}

/* Customization start -- do not edit this section */
/* bb7f17a475d5e1fd67cfc824ba9ee4e8 */ header { background-color: #ffffff; }
/* c9bf3aa6ee60d690b58d5cf8db584cbd */ header .nav-toggle a.toggle div { background-color: #00142c; }
/* e6469258b525ed85ceaa7d723730d629 */ header nav ul li a { color: #00142c; }
/* b3403bf62c056740eaa2729671bf6598 */ header nav ul li a:focus, header nav ul li a:hover { color: #00a1ff; }
/* ed4a05583a1ce26a27a3ea748ffa6947 */ section.website { background-color: #00a1ff; }
/* 0856209b62bfea62069226140c6b61e4 */ header nav ul li a .arrow-down.dark { border-bottom-color: #00a1ff; }
/* c354cceda4c0160f6aa3301345dc3308 */ section.title.tool-title { background-color: #000000; }
/* b6b2c3b0268cae5d6f7736af48d1c8ec */ header nav ul li a .arrow-down.tool { border-bottom-color: #000000; }
/* 782c1cc7fd32e5ae775a65a61576d08a */ section.website.alt { background-color: #ffffff; }
/* 7ac73b90dc346e9fd819ca5dd4d08f14 */ section.website .select .dropdown { background-color: #4c4c4c; }
/* 7adf8c7f2f09b2c4e1db7277fc39bd6e */ section.website.alt input.text-input, section.website.alt input.text-input::placeholder { color: #000000; }
/* 9d3e8a4f9a48b067055ba8b9f0006cac */ section.website input[name=site]::placeholder, section.website input[name=site] { color: #ffffff; }
/* 9f179a6b4708be0947baa9056fecdc5e */ body { background-color: #ffffff; }
/* Customization end */