/* font-family: 'Syne', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap');

html,
body {
    scroll-behavior: smooth;
    color: #181818;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    font-family: 'Syne', sans-serif;
}

p {
    font-weight: 400;
    font-style: normal;
    font-family: 'Syne', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-style: normal;
    margin-bottom: 0;
    margin-top: 11px;
    line-height: 55px;
    font-weight: 700;
    transition: .5s;
}

h1 { font-size: 50px; }
h2 { font-size: 35px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 18px; }

a {
    color: #232323;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
}

a:focus, a:hover {
    text-decoration: none;
    color: #232323;
}

a:focus, .btn:focus {
    outline: none;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    transition: .5s;
}

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
}

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.white h1, .white h2, .white h3, .white h4, .white h5, .white h6,
.white p, .white i {
    color: #fff;
}

ul {
    margin: 0;
    padding: 0;
}
input:focus, button:focus {
    outline-color: #65cef5;
    border: 1px solid #65cef5 !important;
}

textarea:focus {
    border: 1px solid #65cef5 !important;
    outline-color: #65cef5;
}

select:focus {
    border: 1px solid #65cef5;
    outline-color: #65cef5;
}

hr {
    margin: 60px 0;
    padding: 0;
    border-bottom: 1px solid #eceff8;
    border-top: 0;
}

hr.style-2 {
    border-bottom: 1px dashed #f10;
}

hr.mp-0 {
    margin: 0;
    border-bottom: 1px solid #eceff8;
}

hr.mtb-40 {
    margin: 40px 0;
    border-bottom: 1px solid #eceff8;
    border-top: 0;
}

label {
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

a, i, cite, em, var, address, dfn, ol, li, ul {
    font-style: normal;
    font-weight: 400;
}

/* Text selection */
*::selection {
    background: #4fc1f0;
    color: #454545;
    text-shadow: none;
}

::-moz-selection {
    background: #4fc1f0;
    color: #454545;
    text-shadow: none;
}

::-webkit-input-placeholder {
    color: #414040;
}

::placeholder {
    color: #fff;
    font-size: 15px;
}

/* Contact area placeholders */
.contact_area ::placeholder,
.contact_area ::-webkit-input-placeholder,
.contact_area ::-moz-placeholder,
.contact_area :-ms-input-placeholder,
.contact_area :-moz-placeholder {
    color: #181818;
    font-size: 16px;
}
/* Contact area text selection */
.contact_area ::selection {
    color: #181818;
    text-shadow: none;
}

/* Blog reply placeholders */
.blog_reply ::placeholder,
.blog_reply ::-webkit-input-placeholder,
.blog_reply ::-moz-placeholder,
.blog_reply :-ms-input-placeholder,
.blog_reply :-moz-placeholder {
    color: #181818;
}

/* Blog reply text selection */
.blog_reply ::selection {
    color: #181818;
}

.text-right {
    text-align: right !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pl-0 {
    padding-left: 0 !important;
}

/* Utility display helpers */
.d-flex {
    display: flex !important;
    align-items: center !important;
}

.align-items-center {
    align-items: center !important;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

/* White text context helpers */
.white h1,
.white h2,
.white h3,
.white h4,
.white h5,
.white h6,
.white p,
.white i {
    color: #fff;
}

/* Lists reset */
ul {
    margin: 0;
    padding: 0;
}
/* Focus states */
input:focus,
button:focus,
textarea:focus,
select:focus {
    border: 1px solid #65cef5 !important;
    outline-color: #65cef5;
}

/* Horizontal rules */
hr {
    margin: 60px 0;
    padding: 0;
    border-bottom: 1px solid #eceff8;
    border-top: 0;
}

hr.style-2 {
    border-bottom: 1px dashed #f10;
}

hr.mp-0 {
    margin: 0;
    border-bottom: 1px solid #eceff8;
}

hr.mtb-40 {
    margin: 40px 0;
    border-bottom: 1px solid #eceff8;
    border-top: 0;
}

/* Labels */
label {
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

/* General element styles */
a,
i,
cite,
em,
var,
address,
dfn,
ol,
li,
ul {
    font-style: normal;
    font-weight: 400;
}

/* Selection highlight colors */
*::selection {
    background: #4fc1f0;
    color: #454545;
    text-shadow: none;
}

::-moz-selection {
    background: #4fc1f0;
    color: #454545;
    text-shadow: none;
}


.bg-light {
    background-color: #181818 !important;
}


.tilt-container {
  perspective: 1000px;
  display: inline-block;
}

.tilt-hover {
  display: inline-block;
  transition: transform 0.4s ease;
  transform-origin: center;
}

.tilt-hover:hover {
  transform: rotateY(8deg) rotateX(2deg);
}