@import url('https://fonts.googleapis.com/css2?family=Comforter&family=Gugi&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik+Puddles&family=Tourney:ital,wght@0,100..900;1,100..900&family=Yellowtail&display=swap');

.fonts{
    font-family: "Noto Sans";
    font-family: "Poppins";
    font-family: "Roboto";
    font-family: "Tourney";
    font-family: "Yellowtail";
}
*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins';-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;}
html {
  scroll-behavior: smooth;
}

header{position:sticky;top:0;position: relative;z-index: 100;width: 100vw;padding:0;}
.colors{
    color: #007BFF;
    color: #2C2C2C;
    color: #00D1B2;
    color: #F9F9F9;
    color: #E0E0E0;
    color: #191F2E;

}

#burger-menu {
  cursor: pointer;
  height: 27px;
  width: 27px;
  margin: 50px;
  overflow: visible;
  position: relative;
  z-index: 2;
}
#burger-menu span,
#burger-menu span:before,
#burger-menu span:after {
  background: #fff;
  display: block;
  height: 2px;
  opacity: 1;
  position: absolute;
  transition: 0.3s ease-in-out;
}
#burger-menu span:before,
#burger-menu span:after {
  content: "";
}
#burger-menu span:before {
  left: 0px;
  top: -10px;
  width: 27px;
}
#burger-menu span {
  right: 0px;
  top: 13px;
  width: 27px;
}
#burger-menu span:after {
  left: 0px;
  top: 10px;
  width: 27px;
}
#burger-menu.close span:before {
  top: 0px;
  transform: rotate(90deg);
  width: 27px;
}
#burger-menu.close span {
  transform: rotate(-45deg);
  top: 13px;
  width: 27px;
}
#burger-menu.close span:after {
  top: 0px;
  left: 0;
  transform: rotate(90deg);
  opacity: 0;
  width: 0;
}

#menu {
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
  text-align: center;
  padding-top: 20px;
  transition: all 0.3s ease-in-out;
}
#menu.overlay {
  visibility: visible;
  opacity: 1;
  padding-top: 100px;
  background: rgba(0, 0, 0, 0.7);
}
#menu ul {
  padding: 0;
}
#menu li {
  list-style: none;
}
#menu a {
  color: #fff;
  display: block;
  font-size: 32px;
  margin-bottom: 30px;
  text-decoration: none;
}

    section{width:100vw}
 .active {
    color: #007BFF !important; 
    font-weight: 600;
    transition: .5s ease-in-out;
    }
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    nav{display: flex;align-items: center;justify-content: space-between;padding:0px; height: 5vh;background: rgba(0,0,0,0.8);transition: .5s ease-in-out;position: fixed;width:100vw;}
    nav .logo img{height:4vh;transition: .5s ease-in-out;}
    nav .links{display:none}
video{display:block;width:100vw;height:100%;position: absolute;top:0;z-index: 0;object-fit: cover;}
    hr{display: none;}
   
    .landing{height: 100vh;background: transparent;position: relative;background-repeat:no-repeat;z-index: 10;background-origin: content-box;}
    .landing .overlay{width:100%;height:100%;padding: 10% 0;display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;z-index: 5;}
    .landing .overlay .h1_1{font-family: 'Poppins'; font-size: 8em;letter-spacing: 0px;-webkit-text-stroke: 2px #fff;line-height:1;background:url('assets/landing/aa.png');background-size: cover;background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;}
    .landing .overlay .h1_2{font-family:'Comforter';font-size: 4em;color:#fff;letter-spacing: 0px;margin-top:-4%;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);}
    .landing .overlay .h1_3{font-family:'Poppins';font-weight:bold;font-size: 2em;margin-top:-2%;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);-webkit-text-stroke: 2px #fff;background:url('');background-size: cover;background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;}
    .landing h2{ font-family: "Roboto", sans-serif;font-size:1rem;color:#00D1B2; letter-spacing: 0px;}
    .landing button{border:none;background: #007BFF;color: #fff;padding:10px 20px;margin-top:50px;transition: .3s ease-in-out;font-weight: bold;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);}
    .landing button:hover{background: #00a88f;cursor: pointer;}
    .landing span{text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);}

    .services{background: #fff;display: flex;align-items: center;justify-content: center;flex-direction: column;height:auto;padding:50px 5%}
    .services h1{color: #007BFF;;font-size: 2em;}
    .services h3{color: #2C2C2C;font-size: 1rem;}
    .services .service-cards{width:100%;display: flex;align-items: center;justify-content: space-evenly;height:auto;flex-wrap: wrap;}
    .services .service-cards .service-card{background:#fff;border-radius:25px;height:auto;width:100%;display: flex;align-items: center;justify-content: center;flex-direction: column;
        margin:25px;padding:10px 20px;filter: drop-shadow();}
    .services .service-cards .service-card img{height:75px;}
    .services .service-cards .service-card p{text-align: center;}
    .services .service-cards .service-card h1{color: #191F2E;text-shadow: none;font-size: 1em;}

    .pricing{background: #002c5a;display: flex;align-items: center;justify-content: center;flex-direction: column;height:auto;padding:50px 10%; text-align: center;}
    .pricing h1{color: #fff;text-shadow: 1px 1px 5px rgba(0,0,0,0.6);font-size: 2em;}
    .pricing h3{color: #00D1B2;font-size: 1em;}
    .pricing .pricing-cards{display: flex;align-items: center;justify-content: space-evenly;height:100%;width:100%; flex-wrap: wrap;}
    .pricing .pricing-cards .pricing-card{color:#fff;border:1px solid #003f72;border-radius: 25px;background-image: linear-gradient(-20deg, #00D1B2 0%, #007BFF 100%);
        height:auto;width:100%;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;margin:25px 0;padding:10px 20px;box-shadow: 5px 5px 20px #111;}
    .pricing .pricing-cards .pricing-card p{text-align: center;}
    .pricing .pricing-cards .pricing-card ul li{color: #fff;font-size: .8em;text-align: left;}
    .pricing .pricing-cards .pricing-card h1{color: #fff;text-shadow: 2px 2px 4px #111;font-size: 2em;}
    .pricing .pricing-cards .pricing-card h2{color: #00D1B2;text-shadow: none;font-size: 2em;text-shadow: 2px 2px 4px #111;}

    .contact{background: #fff;display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;padding:50px 0}
    .contact h1{color: #191F2E;text-shadow: 1px 1px 5px rgba(0,0,0,0.6);font-size: 2em;}
    .contact h3{color: #006DC6;font-size: 1em;}
    .contact .container{width: 100%;height:100%;display: flex;align-items: center;justify-content: center;}
    .contact .container .form{width: 90%;padding: 10px;}
    .contact .container .form form{display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;}
    .contact .container .form form input, select, textarea{width:100%; border: none;border-bottom: 1px solid #ddd;padding:10px 20px;margin-bottom:25px;transition: .5s ease-in-out;}
    .contact .container .form form .submit{width:100%;border:none;background: #007BFF;color:#fff;padding:10px;transition: .5s ease-in-out;}
    .contact .container .form form label{font-size: .8em;}
    .contact .container .form form .submit:hover{background: #005cbe;cursor: pointer;}
    .contact .container .illustration{display: none;}

    footer{padding:0;background:#2C2C2C;color:#F9F9F9;display: flex;align-items: flex-start;justify-content: space-around;flex-direction: column;width: 100%;}
    footer .hbox{display: flex;align-items: center;justify-content: space-between;width: 100%;padding:25px;}
    footer .hbox .socialmedia{display: flex;align-items: center;justify-content:center;flex-direction: row;width: 100%;}
    footer .hbox .socialmedia a{text-decoration: none;color:#fff;padding:5px 10px;border:1px solid #fff; border-radius:20px;font-size: .8em;margin:0 10px;transition:.5s ease-in-out}
    footer .hbox .socialmedia a:hover{color: #00D1B2;border: 1px solid #00D1B2;}
    footer .copywrite{background:#111;width:100%;text-align: center;font-size: .8em;padding:5px 10px}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) { 
   nav{display: flex;align-items: center;justify-content: space-between;padding:0 25px; height: 5vh;background: rgba(0,0,0,0.8);transition: .5s ease-in-out;position: fixed;width:100vw;}
    nav .logo img{height:4vh;transition: .5s ease-in-out;}
    nav .links{display: none;}
video{display:block;width:100vw;height:100%;position: absolute;top:0;z-index: 0;object-fit: cover;}
    hr{display: none;}
   
    .landing{height: 100vh;background: transparent;position: relative;background-repeat:no-repeat;z-index: 10;background-origin: content-box;}
    .landing .overlay{width:100%;height:100%;padding: 10% 0;display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;z-index: 5;}
    .landing .overlay .h1_1{font-family: 'Poppins'; font-size: 15em;letter-spacing: 0px;-webkit-text-stroke: 2px #fff;line-height:1;background:url('assets/landing/aa.png');background-size: cover;background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;}
    .landing .overlay .h1_2{font-family:'Comforter';font-size: 4em;color:#fff;letter-spacing: 0px;margin-top:-4%;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);}
    .landing .overlay .h1_3{font-family:'Poppins';font-weight:bold;font-size: 4em;margin-top:-2%;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);-webkit-text-stroke: 2px #fff;background:url('');background-size: cover;background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;}
    .landing h2{ font-family: "Roboto", sans-serif;font-size:1rem;color:#00D1B2; letter-spacing: 0px;}
    .landing button{border:none;background: #007BFF;color: #fff;padding:10px 20px;margin-top:50px;transition: .3s ease-in-out;font-weight: bold;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);}
    .landing button:hover{background: #00a88f;cursor: pointer;}
    .landing span{text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);}

    .services{background: #fff;display: flex;align-items: center;justify-content: center;flex-direction: column;height:auto;padding:50px 5%}
    .services h1{color: #007BFF;;font-size: 2em;}
    .services h3{color: #2C2C2C;font-size: 1rem;}
    .services .service-cards{width:100%;display: flex;align-items: center;justify-content: space-evenly;height:auto;flex-wrap: wrap;}
    .services .service-cards .service-card{background:#fff;border-radius:25px;height:auto;width:100%;display: flex;align-items: center;justify-content: center;flex-direction: column;
        margin:25px;padding:10px 20px;filter: drop-shadow();}
    .services .service-cards .service-card img{height:75px;}
    .services .service-cards .service-card p{text-align: center;}
    .services .service-cards .service-card h1{color: #191F2E;text-shadow: none;font-size: 1em;}

    .pricing{background: #002c5a;display: flex;align-items: center;justify-content: center;flex-direction: column;height:auto;padding:50px 10%; text-align: center;}
    .pricing h1{color: #fff;text-shadow: 1px 1px 5px rgba(0,0,0,0.6);font-size: 2em;}
    .pricing h3{color: #00D1B2;font-size: 1em;}
    .pricing .pricing-cards{display: flex;align-items: center;justify-content: space-evenly;height:100%;width:100%; flex-wrap: wrap;}
    .pricing .pricing-cards .pricing-card{color:#fff;border:1px solid #003f72;border-radius: 25px;background-image: linear-gradient(-20deg, #00D1B2 0%, #007BFF 100%);
        height:auto;width:100%;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;margin:25px 0;padding:10px 20px;box-shadow: 5px 5px 20px #111;}
    .pricing .pricing-cards .pricing-card p{text-align: center;}
    .pricing .pricing-cards .pricing-card ul li{color: #fff;font-size: .8em;text-align: left;}
    .pricing .pricing-cards .pricing-card h1{color: #fff;text-shadow: 2px 2px 4px #111;font-size: 2em;}
    .pricing .pricing-cards .pricing-card h2{color: #00D1B2;text-shadow: none;font-size: 2em;text-shadow: 2px 2px 4px #111;}

    .contact{background: #fff;display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;padding:50px 0}
    .contact h1{color: #191F2E;text-shadow: 1px 1px 5px rgba(0,0,0,0.6);font-size: 2em;}
    .contact h3{color: #006DC6;font-size: 1em;}
    .contact .container{width: 100%;height:100%;display: flex;align-items: center;justify-content: center;}
    .contact .container .form{width: 90%;padding: 10px;}
    .contact .container .form form{display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;}
    .contact .container .form form input, select, textarea{width:100%; border: none;border-bottom: 1px solid #ddd;padding:10px 20px;margin-bottom:25px;transition: .5s ease-in-out;}
    .contact .container .form form .submit{width:100%;border:none;background: #007BFF;color:#fff;padding:10px;transition: .5s ease-in-out;}
    .contact .container .form form label{font-size: .8em;}
    .contact .container .form form .submit:hover{background: #005cbe;cursor: pointer;}
    .contact .container .illustration{display: none;}

    footer{padding:0;background:#2C2C2C;color:#F9F9F9;display: flex;align-items: flex-start;justify-content: space-around;flex-direction: column;width: 100%;}
    footer .hbox{display: flex;align-items: center;justify-content: space-between;width: 100%;padding:25px;}
    footer .hbox .socialmedia{display: flex;align-items: center;justify-content:center;flex-direction: row;width: 100%;}
    footer .hbox .socialmedia a{text-decoration: none;color:#fff;padding:5px 10px;border:1px solid #fff; border-radius:20px;font-size: .8em;margin:0 10px;transition:.5s ease-in-out}
    footer .hbox .socialmedia a:hover{color: #00D1B2;border: 1px solid #00D1B2;}
    footer .copywrite{background:#111;width:100%;text-align: center;font-size: .8em;padding:5px 10px}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
nav{display: flex;align-items: center;justify-content: space-between;padding:0 25px; height: 8vh;background: rgba(0,0,0,0.8);transition: .5s ease-in-out;position: fixed;width:100%;}
nav .logo img{height:5vh;transition: .5s ease-in-out;}
nav .links{display: none;}
nav .links a{text-decoration: none;color:#ECECEB;margin: 0 25px;transition: .25s ease-in-out;}
nav .links a:hover{color: #007BFF;}

video{display:block;width:100vw;height:100%;position: absolute;top:0;z-index: 0;object-fit: cover;}
    hr{display: none;}
   
    .landing{height: 100vh;background: transparent;position: relative;background-repeat:no-repeat;z-index: 10;background-origin: content-box;}
.landing .overlay{width:100%;height:100%;padding: 10% 0;display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;z-index: 5;background:transparent;}
.landing .overlay .h1_1{font-family: 'Poppins'; font-size: 15em;letter-spacing: 00px;-webkit-text-stroke: 2px #fff;line-height:1;background:url('assets/landing/aa.png');background-size: cover;background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;}
.landing .overlay .h1_2{font-family:'Comforter';font-size: 5em;letter-spacing: 0px;margin-top:-4%;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);}
.landing .overlay .h1_3{font-family:'Poppins';font-weight:bold;font-size: 4em;margin-top:-2%;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);-webkit-text-stroke: 2px #fff;background:url('');background-size: cover;background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;}
.landing h2{ font-family: "Roboto", sans-serif;font-size:1.5rem;color:#00D1B2; letter-spacing: 0px;}
.landing button{border:none;background: #007BFF;color: #fff;padding:15px 30px;margin-top:50px;transition: .3s ease-in-out;font-weight: bold;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);}
.landing button:hover{background: #00a88f;cursor: pointer;}
.landing span{text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);}

.services{background: #fff;display: flex;align-items: center;justify-content: center;flex-direction: column;height:auto;padding:50px 5%}
.services h1{color: #007BFF;;font-size: 2em;}
.services h3{color: #2C2C2C;font-size: 1rem;}
.services .service-cards{width:100%;display: flex;align-items: center;justify-content: space-evenly;height:auto;flex-wrap: wrap;}
.services .service-cards .service-card{background:#fff;border-radius:25px;height:30%;width:40%;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;
    margin:0px;padding:10px 20px;filter: drop-shadow();}
.services .service-cards .service-card img{height:75px;}
.services .service-cards .service-card p{text-align: center;}
.services .service-cards .service-card h1{color: #191F2E;text-shadow: none;font-size: 1em;text-align: center;}

.pricing{background: #002c5a;display: flex;align-items: center;justify-content: center;flex-direction: column;height:auto;padding:50px 10%}
.pricing h1{color: #fff;text-shadow: 1px 1px 5px rgba(0,0,0,0.6);font-size: 2em;}
.pricing h3{color: #00D1B2;font-size: 1em;}
.pricing .pricing-cards{display: flex;align-items: center;justify-content: space-evenly;height:100%;width:100%; flex-wrap: wrap;}
.pricing .pricing-cards .pricing-card{color:#fff;border:1px solid #003f72;border-radius: 25px;background-image: linear-gradient(-20deg, #00D1B2 0%, #007BFF 100%);
    height:auto;width:70%;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;margin:25px 15%;padding:10px 20px;box-shadow: 5px 5px 20px #111;}
.pricing .pricing-cards .pricing-card p{text-align: center;}
.pricing .pricing-cards .pricing-card ul li{color: #fff;}
.pricing .pricing-cards .pricing-card h1{color: #fff;text-shadow: 2px 2px 4px #111;font-size: 2em;}
.pricing .pricing-cards .pricing-card h2{color: #00D1B2;text-shadow: none;font-size: 2em;text-shadow: 2px 2px 4px #111;}

.contact{background: #fff;display: flex;align-items: center;justify-content: center;flex-direction: column;;padding:50px 25px}
.contact h1{color: #191F2E;text-shadow: 1px 1px 5px rgba(0,0,0,0.6);font-size: 2em;}
.contact h3{color: #006DC6;font-size: 1em;}
.contact .container{width: 100%;height:100%;display: flex;align-items: center;justify-content: center;}
.contact .container .form{width: 50%;padding-left: 0px;}
.contact .container .form form{display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;}
.contact .container .form form input, select, textarea{width:100%; border: none;border-bottom: 1px solid #ddd;padding:10px 20px;margin-bottom:25px;transition: .5s ease-in-out;}
.contact .container .form form .submit{width:100%;border:none;background: #007BFF;color:#fff;padding:10px;transition: .5s ease-in-out;}
.contact .container .form form .submit:hover{background: #005cbe;cursor: pointer;}
.contact .container .illustration{display: block;width:50%;height:60vh;background: url('assets/customer_service_generated.jpg');background-size: cover;}

footer{padding:0;background:#2C2C2C;color:#F9F9F9;display: flex;align-items: flex-start;justify-content: space-around;flex-direction: column;}
footer .hbox{display: flex;align-items: center;justify-content: space-between;width: 100%;padding:25px;}
footer .hbox .socialmedia{display: flex;align-items: flex-end;justify-content: flex-end;flex-direction: row;width: 100%;}
footer .hbox .socialmedia a{text-decoration: none;color:#fff;padding:5px 10px;border:1px solid #fff; border-radius:20px;font-size: .8em;margin:0 10px;transition:.5s ease-in-out}
footer .hbox .socialmedia a:hover{color: #00D1B2;border: 1px solid #00D1B2;}
footer .copywrite{background:#111;width:100%;text-align: center;font-size: .8em;padding:5px 10px}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    header{position:sticky;top:0;position: relative;z-index: 100;}
    body{width:100vw;overflow-x: hidden;}
nav{display: flex;align-items: center;justify-content: space-between;padding:0 25px; height: 8vh;background: rgba(0,0,0,0.8);transition: .5s ease-in-out;position: fixed;width:100%;}
nav .logo img{height:5vh;transition: .5s ease-in-out;}
#menu{display: block;}
#burger-menu{display: block;}
nav .links{display: none;}
nav .links a{text-decoration: none;color:#ECECEB;margin: 0 25px;transition: .25s ease-in-out;}
nav .links a:hover{color: #007BFF;}
video{display:block;width:100vw;height:100%;position: absolute;top:0;z-index: 0;object-fit: cover;}

hr{width: 60%;color: #fff;margin-bottom: 10px;margin-top: -20px;;}
.active {
  color: #007BFF !important; 
  font-weight: 600;
  transition: .5s ease-in-out;
}
.landing{height: 100vh;background:transparent;position: relative;background-repeat:no-repeat;z-index: 10;background-origin: content-box;}
.landing .overlay{width:100%;height:100%;padding: 10% 0;display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;z-index: 5;}
.landing .overlay .h1_1{font-family: 'Poppins'; font-size: 20em;letter-spacing: -20px;-webkit-text-stroke: 2px #fff;line-height:1;background:url('assets/landing/aa.png');background-size: cover;background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;}
.landing .overlay .h1_2{font-family:'Comforter';font-size: 5em;letter-spacing: 0px;margin-top:-4%;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);}
.landing .overlay .h1_3{font-family:'Poppins';font-weight:bold;font-size: 5em;margin-top:-2%;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);-webkit-text-stroke: 2px #fff;background:url('');background-size: cover;background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;}
.landing h2{ font-family: "Roboto", sans-serif;font-size:1.5rem;color:#00D1B2; letter-spacing: 0px;}
.landing button{border:none;background: #007BFF;color: #fff;padding:15px 30px;margin-top:50px;transition: .3s ease-in-out;font-weight: bold;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);}
.landing button:hover{background: #00a88f;cursor: pointer;}
.landing span{text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);}

.services{background: #fff;display: flex;align-items: center;justify-content: center;flex-direction: column;height:auto;padding:50px 5%}
.services h1{color: #007BFF;;font-size: 3em;}
.services h3{color: #2C2C2C;font-size: 1.5rem;}
.services .service-cards{width:100%;display: flex;align-items: center;justify-content: space-evenly;height:auto;flex-wrap: wrap;}
.services .service-cards .service-card{background:#fff;border-radius:25px;height:30%;width:30%;display: flex;align-items: center;justify-content: center;flex-direction: column;
    margin:0px;padding:10px 20px;filter: drop-shadow();}
.services .service-cards .service-card img{height:75px;}
.services .service-cards .service-card p{text-align: center;}
.services .service-cards .service-card h1{color: #191F2E;text-shadow: none;font-size: 1.25em;}

.pricing{background: #002c5a;display: flex;align-items: center;justify-content: center;flex-direction: column;height:auto;padding:50px 0}
.pricing h1{color: #fff;text-shadow: 1px 1px 5px rgba(0,0,0,0.6);font-size: 3em;}
.pricing h3{color: #00D1B2;font-size: 1.5em;}
.pricing .pricing-cards{display: flex;align-items: flex-start;justify-content: space-evenly;height:100%;width:100%; flex-wrap: wrap;}
.pricing .pricing-cards .pricing-card{color:#fff;border:1px solid #003f72;border-radius: 25px;background-image: linear-gradient(-20deg, #00D1B2 0%, #007BFF 100%);
    height:auto;width:30%;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;margin:25px 0;padding:10px 20px;box-shadow: 5px 5px 20px #111;}
.pricing .pricing-cards .pricing-card p{text-align: center;}
.pricing .pricing-cards .pricing-card ul li{color: #fff;}
.pricing .pricing-cards .pricing-card h1{color: #fff;text-shadow: 2px 2px 4px #111;font-size: 2em;}
.pricing .pricing-cards .pricing-card h2{color: #00D1B2;text-shadow: none;font-size: 1.5em;text-shadow: 2px 2px 4px #111;}

.contact{background: #fff;display: flex;align-items: center;justify-content: center;flex-direction: column;;padding:50px 0}
.contact h1{color: #191F2E;text-shadow: 1px 1px 5px rgba(0,0,0,0.6);font-size: 3em;}
.contact h3{color: #006DC6;font-size: 1.5em;}
.contact .container{width: 100%;height:100%;display: flex;align-items: center;justify-content: center;}
.contact .container .form{width: 50%;padding: 0 20px;}
.contact .container .form form{display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;}
.contact .container .form form input, select, textarea{width:100%; border: none;border-bottom: 1px solid #ddd;padding:10px 20px;margin-bottom:25px;transition: .5s ease-in-out;}
.contact .container .form form .submit{width:100%;border:none;background: #007BFF;color:#fff;padding:10px;transition: .5s ease-in-out;}
.contact .container .form form .submit:hover{background: #005cbe;cursor: pointer;}
.contact .container .illustration{width:50%;height:60vh;background: url('assets/customer_service_generated.jpg');background-size: cover;}

footer{padding:0;background:#2C2C2C;color:#F9F9F9;display: flex;align-items: flex-start;justify-content: space-around;flex-direction: column;}
footer .hbox{display: flex;align-items: center;justify-content: space-between;width: 100%;padding:25px;}
footer .hbox .socialmedia{display: flex;align-items: flex-end;justify-content: flex-end;flex-direction: row;width: 100%;}
footer .hbox .socialmedia a{text-decoration: none;color:#fff;padding:5px 10px;border:1px solid #fff; border-radius:20px;font-size: .8em;margin:0 10px;transition:.5s ease-in-out}
footer .hbox .socialmedia a:hover{color: #00D1B2;border: 1px solid #00D1B2;}
footer .copywrite{background:#111;width:100%;text-align: center;font-size: .8em;padding:5px 10px}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    header{position:sticky;top:0;position: relative;z-index: 100;}
    nav{display: flex;align-items: center;justify-content: space-between;padding:0 25px; height: 8vh;background: rgba(0,0,0,0.8);transition: .5s ease-in-out;position: fixed;width:100%;}
    nav .logo img{height:5vh;transition: .5s ease-in-out;}
    nav .links a{text-decoration: none;color:#ECECEB;margin: 0 25px;transition: .25s ease-in-out;}
    nav .links a:hover{color: #007BFF;}
    video{height:100%;width:100vw;position: absolute;top:0;z-index: -10;object-fit: cover;}

    hr{width: 60%;color: #fff;margin-bottom: 10px;margin-top: -20px;;}
    .active {
    color: #007BFF !important; 
    font-weight: 600;
    transition: .5s ease-in-out;
    }
    .landing{height: 100vh;background: url('assets/landing/w1_Nero_AI_Image_Upscaler_Photo_Face2222.png');background-size: cover;background-position: calc(80%);position: relative;
        background-repeat:no-repeat;z-index: 10;background-origin: content-box;padding:0;}
    .landing .overlay{width:70%;height:100%;padding: 10% 0;display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;z-index: 5;}
    .landing .overlay .h1_1{font-family: 'Poppins'; font-size: 20em;letter-spacing: -10px;-webkit-text-stroke: 2px #fff;line-height:1;background:url('assets/landing/aa.png');background-size: cover;background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;}
    .landing .overlay .h1_2{font-family:'Comforter';font-size: 5em;letter-spacing: 0px;margin-top:-4%;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);}
    .landing .overlay .h1_3{font-family:'Poppins';font-weight:bold;font-size: 5em;margin-top:-2%;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);-webkit-text-stroke: 2px #fff;background:url('');background-size: cover;background-clip: text;-webkit-background-clip: text;color: transparent;text-shadow:none;}
    .landing h2{ font-family: "Roboto", sans-serif;font-size:1.5rem;color:#00D1B2; letter-spacing: 0px;}
    .landing button{border:none;background: #007BFF;color: #fff;padding:15px 30px;margin-top:50px;transition: .3s ease-in-out;font-weight: bold;text-shadow: 1px 1px 5px rgba(0,0,0,0.8);}
    .landing button:hover{background: #00a88f;cursor: pointer;}
    .landing span{text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);}

    .services{background: #fff;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;height:100vh;padding:50px 10%}
    .services h1{color: #007BFF;;font-size: 4em;}
    .services h3{color: #2C2C2C;font-size: 1.5rem;}
    .services .service-cards{width:100%;display: flex;align-items: center;justify-content: space-evenly;height:auto;flex-wrap: wrap;}
    .services .service-cards .service-card{background:#fff;border-radius:25px;height:30%;width:30%;display: flex;align-items: center;justify-content: center;flex-direction: column;
        margin: 0;padding:40px 20px;filter: drop-shadow();}
    .services .service-cards .service-card img{height:75px;}
    .services .service-cards .service-card p{text-align: center;}
    .services .service-cards .service-card h1{color: #191F2E;text-shadow: none;font-size: 1.5em;}

    .pricing{background: #002c5a;display: flex;align-items: center;justify-content: center;flex-direction: column;height:auto;padding:50px 0}
    .pricing h1{color: #fff;text-shadow: 1px 1px 5px rgba(0,0,0,0.6);font-size: 4em;}
    .pricing h3{color: #00D1B2;font-size: 1.5em;}
    .pricing .pricing-cards{display: flex;align-items: flex-start;justify-content: space-evenly;height:100%;width:100%; flex-wrap: wrap;}
    .pricing .pricing-cards .pricing-card{color:#fff;border:1px solid #003f72;border-radius: 25px;background-image: linear-gradient(-20deg, #00D1B2 0%, #007BFF 100%);
        height:auto;width:25%;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;margin:25px;padding:10px 20px;box-shadow: 5px 5px 20px #111;}
    .pricing .pricing-cards .pricing-card p{text-align: center;}
    .pricing .pricing-cards .pricing-card ul li{color: #fff;}
    .pricing .pricing-cards .pricing-card h1{color: #fff;text-shadow: 2px 2px 4px #111;font-size: 3em;}
    .pricing .pricing-cards .pricing-card h2{color: #00D1B2;text-shadow: none;font-size: 2em;text-shadow: 2px 2px 4px #111;}

    .contact{background: #fff;display: flex;align-items: center;justify-content: center;flex-direction: column;;padding:50px 0}
    .contact h1{color: #191F2E;text-shadow: 1px 1px 5px rgba(0,0,0,0.6);font-size: 4em;}
    .contact h3{color: #006DC6;font-size: 1.5em;}
    .contact .container{width: 100%;height:100%;display: flex;align-items: center;justify-content: center;}
    .contact .container .form{width: 40%;padding-left: 100px;}
    .contact .container .form form{display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;}
    .contact .container .form form input, select, textarea{width:100%; border: none;border-bottom: 1px solid #ddd;padding:10px 20px;margin-bottom:25px;transition: .5s ease-in-out;}
    .contact .container .form form .submit{width:100%;border:none;background: #007BFF;color:#fff;padding:10px;transition: .5s ease-in-out;}
    .contact .container .form form .submit:hover{background: #005cbe;cursor: pointer;}
    .contact .container .illustration{width:60%;height:60vh;background: url('assets/customer_service_generated.jpg');background-size: cover;}

    footer{padding:0;background:#2C2C2C;color:#F9F9F9;display: flex;align-items: flex-start;justify-content: space-around;flex-direction: column;width: 100vw;}
    footer .hbox{display: flex;align-items: center;justify-content: space-between;width: 100%;padding:25px;}
    footer .hbox .socialmedia{display: flex;align-items: flex-end;justify-content: flex-end;flex-direction: row;width: 100%;}
    footer .hbox .socialmedia a{text-decoration: none;color:#fff;padding:5px 10px;border:1px solid #fff; border-radius:20px;font-size: .8em;margin:0 10px;transition:.5s ease-in-out}
    footer .hbox .socialmedia a:hover{color: #00D1B2;border: 1px solid #00D1B2;}
    footer .copywrite{background:#111;width:100%;text-align: center;font-size: .8em;padding:5px 10px}

}