html {
font-family: Arial, sans-serif; }
* {
box-sizing: border-box;
margin: 0;
padding: 0; }
a {
text-decoration: none;
color: #000; }
ul {
list-style: none; }
@media (max-width: 575px) {
.container {
width: 95%; } }
@media (min-width: 576px) and (max-width: 767px) {
.container {
width: 540px; } }
@media (min-width: 768px) and (max-width: 991px) {
.container {
width: 720px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.container {
width: 960px; } }
@media (min-width: 1200px) and (max-width: 1399px) {
.container {
width: 1140px; } }
@media (min-width: 1400px) {
.container {
width: 1200px; } }
header {
background-color: #FFFFFF;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100; }
header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px; }
@media (max-width: 575px) {
header .container {
align-items: flex-start; } }
@media (min-width: 576px) and (max-width: 767px) {
header .container {
align-items: flex-start; } }
header .container .logo {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: 900;
color: #8490FF;
height: 70px; }
header .container .nav-bar {
display: flex;
justify-content: center;
align-items: center; }
@media (max-width: 575px) {
header .container .nav-bar {
display: none;
padding-top: 70px; } }
@media (min-width: 576px) and (max-width: 767px) {
header .container .nav-bar {
display: none;
padding-top: 70px; } }
header .container .nav-bar.show-list {
transition: all 1s ease-in-out;
display: flex;
width: 100%; }
header .container .nav-bar ul {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
list-style: none; }
@media (max-width: 575px) {
header .container .nav-bar ul {
flex-direction: column;
width: 100%;
gap: 0; } }
@media (min-width: 576px) and (max-width: 767px) {
header .container .nav-bar ul {
flex-direction: column;
width: 100%;
gap: 0; } }
header .container .nav-bar ul li {
font-size: 15px;
line-height: 65px;
text-align: center; }
@media (max-width: 575px) {
header .container .nav-bar ul li {
width: 100%;
font-size: 13px;
line-height: 55px; } }
@media (min-width: 576px) and (max-width: 767px) {
header .container .nav-bar ul li {
width: 100%;
font-size: 13px;
line-height: 55px; } }
@media (max-width: 575px) {
header .container .nav-bar ul li:hover {
background-color: #F9F9FF; } }
@media (min-width: 576px) and (max-width: 767px) {
header .container .nav-bar ul li:hover {
background-color: #F9F9FF; } }
@media (max-width: 575px) {
header .container .nav-bar ul li {
margin: 3px;
font-size: 12px; } }
header .container .nav-bar ul li a.active {
color: #8490FF; }
header .container .nav-bar ul li a:hover {
color: #8490FF; }
header .container .media_button {
width: 40px;
background-color: transparent;
display: none;
justify-content: center;
align-items: center; }
@media (max-width: 575px) {
header .container .media_button {
display: flex;
height: 70px; } }
@media (min-width: 576px) and (max-width: 767px) {
header .container .media_button {
display: flex;
height: 70px; } }
header .container .media_button .main_media_button {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
background-color: transparent;
border: none;
cursor: pointer; }
header .container .media_button .main_media_button span {
width: 100%;
height: 5px;
border-radius: 6px;
background-color: #000; }
header .container .media_button .main_media_button:hover {
transform: rotateY(180deg);
transition: all 0.5s; }
header .container .media_button .main_media_button:hover span {
background-color: #c0c0c0; }
.home {
background-color: #F9F9FF;
min-height: 600px;
display: flex;
align-items: center;
padding-top: 80px; }
.home .container {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 50px; }
@media (min-width: 576px) and (max-width: 767px) {
.home .container {
flex-direction: column; } }
@media (max-width: 575px) {
.home .container {
flex-direction: column; } }
.home .container .info {
margin-bottom: 50px; }
.home .container .info span {
text-transform: uppercase;
letter-spacing: 2px; }
.home .container .info h3 {
margin-top: 25px;
margin-bottom: 25px;
font-size: 50px;
text-transform: uppercase;
font-weight: bold; }
@media (min-width: 768px) and (max-width: 991px) {
.home .container .info h3 {
font-size: 40px; } }
@media (min-width: 576px) and (max-width: 767px) {
.home .container .info h3 {
font-size: 30px; } }
@media (max-width: 575px) {
.home .container .info h3 {
font-size: 30px; } }
.home .container .info p {
font-size: 16px;
color: #888;
line-height: 30px; }
.home .container .info button {
text-transform: uppercase;
padding: 10px 15px;
margin-top: 20px;
background: linear-gradient(270deg, #63bcfc 0%, #8391ff 100%);
border: none;
color: #fff;
font-size: 15px; }
.home .container .info button:hover {
box-shadow: #63bcfc 0px 20px 40px 0px;
cursor: pointer; }
.home .container .picture {
width: 50%;
overflow: hidden; }
@media (min-width: 768px) and (max-width: 991px) {
.home .container .picture {
width: 90%; } }
.home .container .picture img {
width: 100%; }
.about {
background-color: #FFFFFF;
display: flex;
align-items: center; }
.about .container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; }
.about .container .basics {
display: flex;
gap: 10%;
justify-content: space-between;
align-items: center;
padding-top: 50px; }
@media (min-width: 576px) and (max-width: 767px) {
.about .container .basics {
flex-direction: column;
padding-top: 10px; } }
@media (max-width: 575px) {
.about .container .basics {
flex-direction: column;
padding-top: 10px; } }
.about .container .basics .picture {
width: 30%;
overflow: hidden; }
@media (min-width: 768px) and (max-width: 991px) {
.about .container .basics .picture {
width: 50%; } }
@media (min-width: 576px) and (max-width: 767px) {
.about .container .basics .picture {
display: none; } }
@media (max-width: 575px) {
.about .container .basics .picture {
display: none; } }
.about .container .basics .picture img {
width: 100%; }
.about .container .basics .info {
margin-top: 50px;
width: 50%; }
@media (min-width: 768px) and (max-width: 991px) {
.about .container .basics .info {
width: 100%; } }
@media (min-width: 576px) and (max-width: 767px) {
.about .container .basics .info {
width: 100%; } }
@media (max-width: 575px) {
.about .container .basics .info {
width: 100%; } }
.about .container .basics .info span {
text-transform: uppercase;
letter-spacing: 2px; }
.about .container .basics .info h3 {
margin-top: 25px;
margin-bottom: 25px;
font-size: 50px;
text-transform: uppercase;
font-weight: bold; }
@media (min-width: 768px) and (max-width: 991px) {
.about .container .basics .info h3 {
font-size: 40px; } }
@media (min-width: 576px) and (max-width: 767px) {
.about .container .basics .info h3 {
font-size: 30px; } }
@media (max-width: 575px) {
.about .container .basics .info h3 {
font-size: 30px; } }
.about .container .basics .info p {
font-size: 16px;
color: #888;
line-height: 30px; }
.about .container .basics .info button {
text-transform: uppercase;
padding: 10px 15px;
margin-top: 20px;
background: linear-gradient(270deg, #63bcfc 0%, #8391ff 100%);
border: none;
color: #fff;
font-size: 15px; }
.about .container .basics .info button:hover {
box-shadow: #63bcfc 0px 20px 40px 0px;
cursor: pointer; }
.about .container .full-details {
margin-top: 50px;
display: none;
width: 100%; }
.about .container .full-details .desc {
font-size: 16px;
color: #888;
line-height: 30px; }
.about .container .full-details .tools-expert h2 {
margin-top: 25px;
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
background-color: #F9F9FF;
padding: 5px 10px; }
.about .container .full-details .tools-expert .level {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 10px;
margin-top: 15px; }
.about .container .full-details .tools-expert .level .skill h3 {
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 12px;
margin-bottom: 5px;
text-transform: uppercase; }
.about .container .full-details .tools-expert .level .skill h3 span {
margin-left: 15px;
font-size: 12px;
border: 1px solid #ccc;
padding: 3px 5px;
border-radius: 4px;
color: #8490FF; }
.about .container .full-details .tools-expert .level .skill .the-progress {
height: 10px;
background-color: #eee;
border-radius: 4px; }
.about .container .full-details .tools-expert .level .skill .the-progress span {
display: block;
height: 100%;
border-radius: 4px;
background: linear-gradient(270deg, #63bcfc 0%, #8391ff 100%); }
.about .container .full-details .tools-expert .others .other-skills {
width: 100%;
border: 1px solid #F9F9FF;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 5px 5px; }
.about .container .full-details .tools-expert .others .other-skills span {
background: linear-gradient(270deg, #63bcfc 0%, #8391ff 100%);
margin: 5px 2px;
padding: 5px 10px;
color: #000; }
.about .container .full-details .qualifications {
margin-top: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; }
.about .container .full-details .qualifications h3 {
margin-bottom: 25px;
font-size: 30px;
text-transform: capitalize;
font-weight: 700; }
.about .container .full-details .qualifications p {
font-size: 16px;
color: #888;
line-height: 30px; }
.about .container .full-details .qualifications .graph {
width: 100%;
margin-top: 100px; }
.about .container .full-details .qualifications .graph ul {
width: 100%;
display: flex;
flex-direction: column; }
.about .container .full-details .qualifications .graph ul li {
position: relative;
width: 100%;
width: 50%;
padding: 0 40px; }
@media (min-width: 576px) and (max-width: 767px) {
.about .container .full-details .qualifications .graph ul li {
width: 100%; } }
@media (max-width: 575px) {
.about .container .full-details .qualifications .graph ul li {
width: 100%; } }
.about .container .full-details .qualifications .graph ul li > div {
padding: 40px 40px;
width: fit-content;
box-shadow: 0px 0px 15px #F9F9F9; }
.about .container .full-details .qualifications .graph ul li h3 {
margin-bottom: 25px;
font-size: 20px;
text-transform: capitalize;
font-weight: 500; }
.about .container .full-details .qualifications .graph ul li p {
font-size: 16px;
color: #888;
line-height: 30px; }
.about .container .full-details .qualifications .graph ul li::before {
position: absolute;
content: '';
top: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #8490FF;
border: 5px solid #eee;
z-index: 5; }
.about .container .full-details .qualifications .graph ul li::after {
position: absolute;
content: '';
top: 0;
width: 2px;
height: 100%;
background-color: #8490FF;
background-color: #eee; }
.about .container .full-details .qualifications .graph ul li:nth-child(1), .about .container .full-details .qualifications .graph ul li:nth-child(3), .about .container .full-details .qualifications .graph ul li:nth-child(5) {
align-self: flex-end; }
.about .container .full-details .qualifications .graph ul li:nth-child(1)::before, .about .container .full-details .qualifications .graph ul li:nth-child(3)::before, .about .container .full-details .qualifications .graph ul li:nth-child(5)::before {
left: -15px; }
.about .container .full-details .qualifications .graph ul li:nth-child(1)::after, .about .container .full-details .qualifications .graph ul li:nth-child(3)::after, .about .container .full-details .qualifications .graph ul li:nth-child(5)::after {
left: -1px; }
.about .container .full-details .qualifications .graph ul li:nth-child(2), .about .container .full-details .qualifications .graph ul li:nth-child(4), .about .container .full-details .qualifications .graph ul li:nth-child(6) {
align-self: flex-start; }
.about .container .full-details .qualifications .graph ul li:nth-child(2) > div, .about .container .full-details .qualifications .graph ul li:nth-child(4) > div, .about .container .full-details .qualifications .graph ul li:nth-child(6) > div {
float: right; }
@media (min-width: 576px) and (max-width: 767px) {
.about .container .full-details .qualifications .graph ul li:nth-child(2) > div, .about .container .full-details .qualifications .graph ul li:nth-child(4) > div, .about .container .full-details .qualifications .graph ul li:nth-child(6) > div {
float: left; } }
@media (max-width: 575px) {
.about .container .full-details .qualifications .graph ul li:nth-child(2) > div, .about .container .full-details .qualifications .graph ul li:nth-child(4) > div, .about .container .full-details .qualifications .graph ul li:nth-child(6) > div {
float: left; } }
.about .container .full-details .qualifications .graph ul li:nth-child(2)::before, .about .container .full-details .qualifications .graph ul li:nth-child(4)::before, .about .container .full-details .qualifications .graph ul li:nth-child(6)::before {
right: -15px; }
@media (min-width: 576px) and (max-width: 767px) {
.about .container .full-details .qualifications .graph ul li:nth-child(2)::before, .about .container .full-details .qualifications .graph ul li:nth-child(4)::before, .about .container .full-details .qualifications .graph ul li:nth-child(6)::before {
left: -15px; } }
@media (max-width: 575px) {
.about .container .full-details .qualifications .graph ul li:nth-child(2)::before, .about .container .full-details .qualifications .graph ul li:nth-child(4)::before, .about .container .full-details .qualifications .graph ul li:nth-child(6)::before {
left: -15px; } }
.about .container .full-details .qualifications .graph ul li:nth-child(2)::after, .about .container .full-details .qualifications .graph ul li:nth-child(4)::after, .about .container .full-details .qualifications .graph ul li:nth-child(6)::after {
right: -1px; }
@media (min-width: 576px) and (max-width: 767px) {
.about .container .full-details .qualifications .graph ul li:nth-child(2)::after, .about .container .full-details .qualifications .graph ul li:nth-child(4)::after, .about .container .full-details .qualifications .graph ul li:nth-child(6)::after {
left: -1px; } }
@media (max-width: 575px) {
.about .container .full-details .qualifications .graph ul li:nth-child(2)::after, .about .container .full-details .qualifications .graph ul li:nth-child(4)::after, .about .container .full-details .qualifications .graph ul li:nth-child(6)::after {
left: -1px; } }
.services {
background-color: #FFFFFF;
min-height: 600px;
display: flex;
align-items: center; }
.services .container {
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
padding-top: 50px; }
.services .container .title {
width: 100%;
text-align: center; }
.services .container .title h2 {
margin-bottom: 20px;
font-size: 40px;
text-transform: capitalize;
color: #222222; }
.services .container .title p {
width: 70%;
margin: auto;
font-size: 16px;
color: #888;
line-height: 25px; }
@media (min-width: 576px) and (max-width: 767px) {
.services .container .title p {
width: 100%; } }
@media (max-width: 575px) {
.services .container .title p {
width: 100%; } }
.services .container .service-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px; }
.services .container .service-cards .card {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center; }
.services .container .service-cards .card .logo {
font-size: 35px;
color: #8490FF; }
.services .container .service-cards .card .name {
text-transform: capitalize;
font-size: 22px;
color: #222222; }
.services .container .service-cards .card .desc {
text-align: center;
color: #888;
font-size: 16px;
letter-spacing: 0.5px;
line-height: 25px; }
@media (min-width: 576px) and (max-width: 767px) {
.services .container .service-cards .card .desc {
width: 70%; } }
@media (max-width: 575px) {
.services .container .service-cards .card .desc {
width: 70%; } }
.numbers {
margin-top: 120px;
background: linear-gradient(270deg, #63bcfc 0%, #8391ff 100%);
min-height: 300px;
display: flex;
align-items: center; }
.numbers .container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
color: #fff;
text-align: center; }
.numbers .container span {
font-size: 40px;
font-weight: bold; }
.numbers .container p {
font-size: 16px; }
.projects {
background-color: #FFFFFF;
min-height: 600px;
display: flex;
align-items: center; }
.projects .container {
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
padding-top: 50px; }
.projects .container .tit {
width: 100%;
text-align: center; }
.projects .container .tit h2 {
margin-bottom: 20px;
font-size: 40px;
text-transform: capitalize;
color: #222222; }
.projects .container .tit p {
width: 70%;
margin: auto;
font-size: 16px;
color: #888;
line-height: 25px; }
@media (min-width: 576px) and (max-width: 767px) {
.projects .container .tit p {
width: 100%; } }
@media (max-width: 575px) {
.projects .container .tit p {
width: 100%; } }
.projects .container .filter span {
padding: 5px; }
.projects .container .filter span:hover {
border-bottom: 2px solid #000;
color: #8490FF;
cursor: pointer; }
.projects .container .filter span.active {
color: #8490FF; }
.projects .container .project-cards {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px; }
.projects .container .project-cards .card {
display: none;
flex-direction: column;
gap: 20px;
align-items: center; }
.projects .container .project-cards .card .pic {
width: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
border: 2px solid #8490FF; }
.projects .container .project-cards .card .pic img {
width: 100%;
aspect-ratio: 1/1;
object-fit: contain; }
.projects .container .project-cards .card .title {
text-align: center; }
.projects .container .project-cards .card .title h3 {
margin-bottom: 10px;
color: #222; }
.projects .container .project-cards .card .title span {
color: #888;
font-size: 15px; }
.projects .container .project-cards .show {
display: flex; }
.feedback {
background-color: #F9F9FF;
min-height: 600px;
display: flex;
align-items: center; }
.feedback .container {
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
padding-top: 50px; }
.feedback .container .title {
width: 100%;
text-align: center; }
.feedback .container .title h2 {
margin-bottom: 20px;
font-size: 40px;
text-transform: capitalize;
color: #222222; }
.feedback .container .title p {
width: 70%;
margin: auto;
font-size: 16px;
color: #888;
line-height: 25px; }
@media (min-width: 576px) and (max-width: 767px) {
.feedback .container .title p {
width: 100%; } }
@media (max-width: 575px) {
.feedback .container .title p {
width: 100%; } }
.feedback .container .feedbacks {
display: flex;
justify-content: center;
align-items: center;
gap: 25px; }
@media (max-width: 575px) {
.feedback .container .feedbacks {
flex-direction: column; } }
@media (min-width: 576px) and (max-width: 767px) {
.feedback .container .feedbacks {
flex-direction: column; } }
@media (min-width: 768px) and (max-width: 991px) {
.feedback .container .feedbacks {
flex-direction: column; } }
.feedback .container .feedbacks .feedback-cards {
display: flex;
gap: 25px; }
@media (max-width: 575px) {
.feedback .container .feedbacks .feedback-cards {
flex-direction: column; } }
@media (min-width: 576px) and (max-width: 767px) {
.feedback .container .feedbacks .feedback-cards {
flex-direction: column; } }
.feedback .container .feedbacks .feedback-cards .card {
padding: 25px;
background-color: #FFF;
box-shadow: 0px 0px 5px #F9F9FF; }
.feedback .container .feedbacks .feedback-cards .card:hover {
cursor: pointer; }
.feedback .container .feedbacks .feedback-cards .card .pic {
width: 50px;
overflow: hidden;
margin-right: 10px;
float: left;
height: 100%; }
.feedback .container .feedbacks .feedback-cards .card .pic img {
width: 50px;
height: 50px;
border-radius: 50%; }
.feedback .container .feedbacks .feedback-cards .card .disc p {
font-size: px;
color: #888;
line-height: 25px; }
.feedback .container .feedbacks .feedback-cards .card .disc h3 {
color: #222;
line-height: 50px; }
.feedback .container .feedbacks .feedback-cards .card .disc h3:hover {
color: #8490FF; }
.feedback .container .feedbacks .feedback-cards .card .disc span {
font-size: px;
color: #888;
line-height: 25px; }
.feedback .container .feedbacks .arrows {
display: flex;
flex-direction: column; }
@media (max-width: 575px) {
.feedback .container .feedbacks .arrows {
flex-direction: row; } }
@media (min-width: 576px) and (max-width: 767px) {
.feedback .container .feedbacks .arrows {
flex-direction: row; } }
@media (min-width: 768px) and (max-width: 991px) {
.feedback .container .feedbacks .arrows {
flex-direction: row; } }
.feedback .container .feedbacks .arrows .arrow {
background-color: #FFF;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
font-size: 15px;
font-weight: small;
transition: 0.3s; }
.feedback .container .feedbacks .arrows .arrow:hover {
cursor: pointer;
background: linear-gradient(270deg, #63bcfc 0%, #8391ff 100%); }
.plans {
background-color: #FFFFFF;
min-height: 600px;
display: flex;
align-items: center; }
.plans .container {
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
padding-top: 50px; }
.plans .container .title {
width: 100%;
text-align: center; }
.plans .container .title h2 {
margin-bottom: 20px;
font-size: 40px;
text-transform: capitalize;
color: #222222; }
.plans .container .title p {
width: 70%;
margin: auto;
font-size: 16px;
color: #888;
line-height: 25px; }
@media (min-width: 576px) and (max-width: 767px) {
.plans .container .title p {
width: 100%; } }
@media (max-width: 575px) {
.plans .container .title p {
width: 100%; } }
.plans .container .plan-cards {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
row-gap: 30px;
margin-bottom: 100px; }
.plans .container .plan-cards .card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px;
transition: all 0.3s ease 0s;
background-color: #F9F9FF; }
.plans .container .plan-cards .card:hover {
background: linear-gradient(270deg, #63bcfc 0%, #8391ff 100%);
transform: scale(1.05);
cursor: pointer; }
.plans .container .plan-cards .card:hover .plan-no {
color: #fff; }
.plans .container .plan-cards .card:hover .plan-type h3 {
color: #fff; }
.plans .container .plan-cards .card:hover .plan-type p {
color: #fff; }
.plans .container .plan-cards .card:hover .plan-desc ul li {
color: #fff; }
.plans .container .plan-cards .card:hover .price {
display: none; }
.plans .container .plan-cards .card:hover .buy {
display: block;
font-size: 15px;
font-weight: bold;
margin-top: 30px;
background-color: #fff;
text-transform: uppercase;
width: 100%;
text-align: center;
line-height: 50px; }
.plans .container .plan-cards .card .plan-no {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
line-height: 100px;
font-size: 50px;
columns: #222;
border: 35px solid #E2E6FF;
margin-bottom: 25px; }
.plans .container .plan-cards .card .plan-type {
text-align: center;
margin-bottom: 30px; }
.plans .container .plan-cards .card .plan-type h3 {
font-size: 20px;
color: #222;
text-transform: capitalize;
line-height: 50px; }
.plans .container .plan-cards .card .plan-type p {
font-size: 16px;
color: #888;
text-transform: capitalize;
line-height: 25px; }
.plans .container .plan-cards .card .plan-desc ul li {
border-top: 1px solid rgba(136, 136, 136, 0.305);
padding: 20px 10px;
color: #888;
font-size: 14px;
letter-spacing: 0.5px;
text-align: center; }
.plans .container .plan-cards .card .plan-desc ul li:last-child {
border-bottom: 1px solid rgba(136, 136, 136, 0.305); }
.plans .container .plan-cards .card .price {
font-size: 40px;
font-weight: bold;
margin-top: 30px; }
.plans .container .plan-cards .card .buy {
display: none; }
.blog-posts {
background-color: #F9F9FF;
min-height: 600px;
display: flex;
align-items: center;
padding-bottom: 100px; }
.blog-posts .container {
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
padding-top: 50px;
min-height: 900px; }
.blog-posts .container .title {
width: 100%;
text-align: center; }
.blog-posts .container .title h2 {
margin-bottom: 20px;
font-size: 40px;
text-transform: capitalize;
color: #222222; }
.blog-posts .container .title p {
width: 70%;
margin: auto;
font-size: 16px;
color: #888;
line-height: 25px; }
@media (min-width: 576px) and (max-width: 767px) {
.blog-posts .container .title p {
width: 100%; } }
@media (max-width: 575px) {
.blog-posts .container .title p {
width: 100%; } }
.blog-posts .container .blog-post-cards {
width: 100%;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px; }
.blog-posts .container .blog-post-cards .card {
display: flex;
flex-direction: column; }
.blog-posts .container .blog-post-cards .card:hover {
cursor: pointer; }
.blog-posts .container .blog-post-cards .card:hover .crd-title {
color: #8490FF; }
.blog-posts .container .blog-post-cards .card:hover .pic img {
transform: scale(1.05); }
.blog-posts .container .blog-post-cards .card .pic {
width: 100%;
height: 200px;
overflow: hidden; }
.blog-posts .container .blog-post-cards .card .pic img {
width: 100%;
height: 100%;
transition: transform 0.3s; }
.blog-posts .container .blog-post-cards .card .pic img:hover {
transform: scale(1.05); }
.blog-posts .container .blog-post-cards .card .img-nav {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(136, 136, 136, 0.421);
padding: 10px 0; }
.blog-posts .container .blog-post-cards .card .img-nav .avat {
display: flex;
justify-content: space-between;
align-items: center; }
.blog-posts .container .blog-post-cards .card .img-nav .avat .avator {
width: 30px;
height: 30px;
overflow: hidden;
margin-right: 10px; }
.blog-posts .container .blog-post-cards .card .img-nav .avat .avator img {
width: 100%;
height: 100%; }
.blog-posts .container .blog-post-cards .card .img-nav .avat .name {
color: #444;
font-size: 15px;
text-transform: capitalize; }
.blog-posts .container .blog-post-cards .card .img-nav .inf {
display: flex;
justify-content: space-between; }
.blog-posts .container .blog-post-cards .card .img-nav .inf .date {
margin-right: 10px;
color: rgba(68, 68, 68, 0.512);
font-size: 15px; }
.blog-posts .container .blog-post-cards .card .img-nav .inf .like {
color: rgba(68, 68, 68, 0.512);
font-size: 15px;
margin-right: 10px; }
.blog-posts .container .blog-post-cards .card .img-nav .inf .like svg {
color: #000;
margin-right: 5px; }
.blog-posts .container .blog-post-cards .card .img-nav .inf .comments {
color: rgba(68, 68, 68, 0.512);
font-size: 15px; }
.blog-posts .container .blog-post-cards .card .img-nav .inf .comments svg {
color: #000;
margin-right: 5px; }
.blog-posts .container .blog-post-cards .card .crd-title {
margin: 35px auto;
font-size: 20px;
text-transform: uppercase;
font-weight: 600; }
.blog-posts .container .blog-post-cards .card .desc {
font-size: 15px;
line-height: 25px;
color: #888; }
.last {
background: linear-gradient(270deg, #63bcfc 0%, #8391ff 100%); }
.last .container {
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
padding-top: 50px;
min-height: 200px; }
.last .container .cards {
width: 100%;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
padding-bottom: 50px; }
.last .container .cards .card {
opacity: 0.5;
transition: 0.3s;
margin: auto; }
.last .container .cards .card:hover {
opacity: 1; }
footer {
background-color: #04091E;
color: #fff; }
footer .container {
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
padding: 150px 0; }
footer .container .cards {
width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
gap: 5%; }
@media (max-width: 575px) {
footer .container .cards {
flex-direction: column;
align-items: center; } }
@media (min-width: 576px) and (max-width: 767px) {
footer .container .cards {
flex-direction: column;
align-items: center; } }
footer .container .cards .aboutme {
width: 40%; }
@media (max-width: 575px) {
footer .container .cards .aboutme {
width: 80%; } }
@media (min-width: 576px) and (max-width: 767px) {
footer .container .cards .aboutme {
width: 80%; } }
footer .container .cards .aboutme h3 {
font-size: 20px;
margin-bottom: 20px; }
footer .container .cards .aboutme p {
color: #888;
font-size: 16px;
line-height: 20px;
margin-top: 20px; }
footer .container .cards .Newsletter {
width: 40%; }
@media (max-width: 575px) {
footer .container .cards .Newsletter {
margin-top: 20px;
width: 80%; } }
@media (min-width: 576px) and (max-width: 767px) {
footer .container .cards .Newsletter {
margin-top: 20px;
width: 80%; } }
footer .container .cards .Newsletter h3 {
font-size: 30px;
margin-bottom: 20px; }
footer .container .cards .Newsletter p {
color: #888;
font-size: 16px;
line-height: 20px;
margin-top: 20px;
margin-bottom: 20px; }
footer .container .cards .Newsletter form {
width: 100%;
display: flex; }
footer .container .cards .Newsletter form input {
width: 90%;
height: 50px;
border: none;
padding: 20px;
caret-color: #888;
outline: none; }
footer .container .cards .Newsletter form button {
width: 10%;
border: none;
background-color: #8490FF;
color: #fff;
cursor: pointer; }
footer .container .cards .Followme {
width: 10%; }
@media (max-width: 575px) {
footer .container .cards .Followme {
margin-top: 20px;
width: 80%; } }
@media (min-width: 576px) and (max-width: 767px) {
footer .container .cards .Followme {
margin-top: 20px;
width: 80%; } }
footer .container .cards .Followme h3 {
font-size: 20px;
margin-bottom: 20px; }
footer .container .cards .Followme p {
color: #888;
font-size: 16px;
line-height: 20px;
margin-top: 20px;
margin-bottom: 20px; }
footer .container .cards .Followme .socials {
display: flex;
justify-content: space-between; }
footer .container .cards .Followme .socials a {
color: #fff; }
footer .container .cards .Followme .socials a:hover {
color: #8490FF; }
footer .container .cards .Followme .socials a svg {
font-size: 18px; }
.contacts {
background-color: #FFFFFF;
min-height: 600px;
display: flex;
align-items: center;
padding-top: 150px;
padding-bottom: 150px; }
.contacts .container {
display: flex;
flex-direction: column;
gap: 50px;
align-items: center; }
.contacts .container .map {
width: 90%;
height: 600px;
border: 1px solid; }
@media (max-width: 575px) {
.contacts .container .map {
height: 300px; } }
@media (min-width: 576px) and (max-width: 767px) {
.contacts .container .map {
height: 300px; } }
@media (min-width: 768px) and (max-width: 991px) {
.contacts .container .map {
height: 400px; } }
.contacts .container .contact {
padding-top: 50px;
display: flex;
justify-content: space-between;
width: 100%; }
@media (max-width: 575px) {
.contacts .container .contact {
margin-top: 20px;
width: 80%;
flex-direction: column; } }
@media (min-width: 576px) and (max-width: 767px) {
.contacts .container .contact {
margin-top: 20px;
width: 80%;
flex-direction: column; } }
.contacts .container .contact .info {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
width: 30%; }
.contacts .container .contact .info > div {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center; }
.contacts .container .contact .info > div svg {
font-size: 20px;
color: #8490FF; }
.contacts .container .contact .info > div p {
color: #666;
margin-left: 20px; }
.contacts .container .contact .info > div p a {
color: inherit; }
.contacts .container .contact form {
display: flex;
width: 70%;
gap: 20px;
margin: auto; }
@media (max-width: 575px) {
.contacts .container .contact form {
margin-top: 20px;
width: 80%;
flex-direction: column;
align-items: center; } }
@media (min-width: 576px) and (max-width: 767px) {
.contacts .container .contact form {
margin-top: 20px;
width: 80%;
flex-direction: column;
align-items: center; } }
.contacts .container .contact form > div {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px; }
.contacts .container .contact form > div input {
width: 100%;
height: 50px;
padding: 20px;
outline: none; }
.contacts .container .contact form > div textarea {
padding: 20px;
outline: none; }
.contacts .container .contact form > div button {
padding: 20px;
background-color: #8490FF; }
.container {
margin: auto; }
/*# sourceMappingURL=main.css.map */