@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');
*{
-webkit-box-sizing:border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul{
margin:0;
padding:0;
}
#icon{
cursor: pointer;
background-color: #92E3A9;
height:30px;
width:30px;
border-radius: 50%;
padding:4px;
}
:root{
--dark-color:#1D1D1D;
--toogler-color:#92E3A9;
--h1-color:#D2D2D2;
--p-color:#A9A9A9;
--btn-after-color:#27AE60;
}
.light-color{
--dark-color:#FFFFFF;
--toogler-color:#000000;
--h1-color:#263238;
--p-color:#767676;
--btn-after-color:#4F4F4F;
}
/* 2 Navbar */
.navigation-wrap{
position:fixed;
width: 100%;
left: 0;
padding:45px 7%;
background-color:var(--dark-color);
z-index: 1000;
transition: all 1s ease-out;
}
.navigation-wrap .navbar-brand{
margin: 0;
padding: 0;
}
.navbar-toggler:focus{
outline: unset;
border:unset;
box-shadow: none;
}
.navigation-wrap .navbar-toggler{
color:var(--toogler-color);
border:unset;
}
/* 3 Top Banner */
.top-banner{
width: 100%;
height:100vh;
background-color:var(--dark-color) !important;
background:url(./images/Group\ 3510.png) no-repeat;
background-position:0 10rem;
padding:8.875rem 0 6.375rem;
overflow: hidden;
transition: all 1s ease-out;
}
.top-banner h1{
font-family: "Overpass", serif;
font-weight: 700;
font-size: 48px;
line-height: 60.77px;
color: var(--h1-color);
margin-bottom: 27px;
}
.top-banner p{
font-family: "Overpass", serif;
font-weight: 400;
font-size: 24px;
line-height: 30.38px;
color:var(--p-color);
}
.main-btn{
width: 241px;
height: 58px;
border-radius: 55px;
text-align: center;
justify-content:center;
font-size:1.5rem;
font-weight: 600;
-webkit-transition:all 0.4s ease-out 0s;
-moz-transition:all 0.4s ease-out 0s;
-o-transition:all 0.4s ease-out 0s;
-ms-transition:all 0.4s ease-out 0s;
transition:all 0.4s ease-out 0s;
border: none;
background-color:#27AE60;
position: relative;
color:#FFFFFF;
}
.main-btn::after{
content: "";
border: 2px solid var(--btn-after-color);
width: 4.3438rem;
position: absolute;
top:70px;
left:80px;
}
.main-btn:hover{
/* background-color:transparent;
color: var(--text-primary); */
}