html{
scroll-behavior: smooth;
}
*{
padding: 0;
margin: 0;
}
body{
background: whitesmoke;
}
.main{
width: 100%;
height: 100vh;
/* background-color: whitesmoke; */
}
.main .top .logo{
position: fixed;
/* filter: blur(5px); */
background: white;
height: 80px;
width: 100%;
display: flex;
font-family: sans-serif;
/* justify-content: space-between; */
align-items: center;
z-index: 100;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.main .top .logo h3{
color: purple;
padding: 35px 10px;
}
.main .top .logo img{
width: 60px;
height: 60px;
margin-top: 10px;
margin-left: 10px;
}
.btn{
float: right;
position: fixed;
right: 20px;
top: 20px;
padding: 10px;
border: none;
background: purple;
color: white;
border-radius: 30px;
width: 60px;
height: 40px;
animation: btn-fade 1s;
z-index: 1000;
}
.animate{
width: 100%;
animation: fadeup 1s ;
}
.animateup{
animation: fadeup 1s ;
}
.main .banner img{
position: absolute;
width: 40%;
right: 0px;
margin-top: -70px;
/* background: red; */
}
.main .banner h2{
top: 25%;
left: 15%;
position: absolute;
padding: 30px;
font-family: sans-serif;
width: 40%;
animation: fade 1s;
font-weight: 700;
font-style: italic;
text-align: center;
font-size: 50px;
}
.main .banner span{
font-size: 16px;
background: purple;
padding: 10px 15px;
color: white;
border-radius: 5px;
margin: 20px;
margin-top: 50px;
}
.main .banner .logo{
position: absolute;
top: 200px;
align-items: center;
display: flex;
left: 0.5%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-align: center;
justify-content: center;
}
.main .banner .logo h3{
margin-top: 10px;
text-align: center;
}
.main .serrvices{
position: relative;
margin-top: 480px;
text-align: center;
animation: size 3s infinite;
font-size: 18px;
background-color: purple;
padding: 10px;
font-family: sans-serif;
color: yellow;
}
.main .a{
/* margin-top: 390px; */
/* position: relative; */
top: 10px;
text-align: center;
font-size: 18px;
padding: 10px;
border-radius: 10px;
font-family: sans-serif;
color: white;
margin-top: 10px;
}
.main a{
top: 10px;
text-align: center;
font-size: 18px;
padding: 10px;
border-radius: 10px;
font-family: sans-serif;
color: black;
text-decoration: none;
background-color: white;
}
.main .contents{
width: 100%;
background-color: whitesmoke;
}
.main .contents .row{
width: 100%;
padding: 40px 0px;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}
.popup{
position:fixed;
left:0;
top:1000vh;
width:100%;
height:100%;
z-index: 10000;
}
.popup .overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
opacity:1;
transition:opacity 200ms ease-in-out 200ms;
}
.popup .popup-content{
position:absolute;
top:50%;
left:48%;
transform: translate(10%, -90%) scale(0.8);
width:95%;
max-width:350px;
background:#fff;
padding: 30px;
border-radius:20px;
box-shadow: 0px 2px 2px 5px rgba(0,0,0,0.05);
transition:all 300ms ease-in-out;
}
.popup .popup-content h2{
margin:10px 0px;
font-size: 25px;
color:#111;
text-align:center;
}
.popup .popup-content p{
margin:15px 0px;
color:#222;
font-size:16px;
text-align:center;
}
.popup .popup-content .controls{
display:flex;
justify-content:center;
align-items: center;
margin:20px 0px 0px;
}
.popup .popup-content .controls button{
padding:10px 20px;
border:none;
outline:none;
font-size:15px;
border-radius:20px;
cursor:pointer;
}
.popup .popup-content .controls .close-btn{
background:transparent;
color:#3284ed;
}
.popup .popup-content .controls .confirm-btn{
background: purple;
color:#fff;
}
.popup.active{
top:0px;
transition: top 0ms ease-in-out 0ms;
}
.popup.active .overlay{
opacity:1;
transition: all 300ms ease-in-out;
}
.popup.active .popup-content{
transform:translate(-50%, -50%) scale(1);
opacity:1;
}
.serv{
display: grid;
position: absolute;
margin-top: 100vh;
width: 100%;
grid-template-columns: auto auto auto auto;
}
.serv .grid{
font-family: sans-serif;
margin: 20px;
background: white;
width: 300px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.serv .grid i{
font-size: 40px;
margin-right: 10px;
padding-left: 20px;
}
.serv .grid h2{
font-weight: 500;
font-size: 15px;
background-color: white;
width: 170px;
color: rgba(0,0,0,0.5);
height: 80px;
margin-top: 50px;
margin-left: -180px;
}
.serv .grid span{
text-align: left;
margin-top: -70px;
margin-left: -10px;
position: relative;
width: 200px;
/* background-color: yellow; */
height: 20px;
align-items: flex-start;
font-size: 17px;
text-transform: uppercase;
font-weight: 900;
left: 0;
bottom: 0;
}
.serv .s{
padding: 30px;
background-color: purple;
color: white;
text-align: center;
font-family: sans-serif;
font-weight: 700;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
text-transform: uppercase;
}
.snap{
scroll-behavior: smooth;
scroll-snap-type: both mandatory;
}
.why{
position: absolute;
width: 100%;
background: purple;
margin-top: 350px;
text-align: center;
color: white;
padding: 25px 0px;
font-size: 16px;
}
.why h1{
font-size: 26px;
font-family: sans-serif;
text-transform: uppercase;
}
.scro h2{
padding: 5px;
font-size: 20px;
}
.scro p{
padding: 5px;
font-size: 17px;
}
.scro{
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
align-items: center;
width: 100%;
padding: 0;
margin: 0;
/* background-color: yellow; */
}
.scro .items{
font-family: sans-serif;
background-color: rgba(167, 2, 167, 0.993);
padding: 20px;
border-radius: 15px;
width: 350px;
margin: 30px;
}
.scro .items img{
border-radius: 20px;
width: 80%;
}
.why .aims {
background: white;
color: black;
display: grid;
grid-template-columns: auto auto;
}
.why .aims img{
width: 80%;
}
.why .aims .right{
/* margin-bottom: -200px;x */
align-items: center;
justify-content: center;
background: white;
font-family: sans-serif;
width: 90%;
}
.why .aims .right h2{
font-size: 30px;
margin: 10px;
color: purple;
}
.why .aims .right p{
color: rgb(163, 92, 163);
}
/* columns */
.why .aims > * {
padding: 10px 0px;
}
.footer{
font-family: sans-serif;
padding: 30px 0px;
width: 100%;
display: grid;
grid-template-columns: 250px auto auto ;
background: rgb(44, 1, 44);
margin-top: 0px;
align-items: center;
justify-content: space-around;
}
#whatsapp{
/* background-color: green; */
color: green;
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
animation: shake 0.5s infinite;
font-size: 25px;
}
@keyframes shake {
0%{ transform: translateX(2px); rotate: 10deg;}
25%{ transform: translatey(-2px); rotate: -10deg;}
50%{ transform: translateX(-4px); rotate: 10deg;}
100%{ transform: translatey(2px); rotate: -10deg;}
}
.footer-txt{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
}
.footer .items{
padding: 20px;
text-align: left;
}
.footer .items:first-child{
margin-top: -40px;
}
.footer .items a{
color: rgb(214, 19, 214);
text-decoration: none;
/* color: whitesmoke; */
}
@media screen and (max-width:1000px){
.main .banner h2{
top: 100px;
left: 0%;
position: absolute;
padding: 30px;
font-family: sans-serif;
width: 40%;
animation: fade 1s;
font-weight: 700;
font-style: italic;
text-align: center;
font-size: 50px;
margin-top: 220px;
}
.why .aims {
display: inline-block;
/* grid-template-columns:1fr; */
}
.footer{
width: 100%;
display: grid;
grid-template-columns:auto;
}
.main{
width: 100%;
}
.serv{
display: grid;
position: absolute;
margin-top: 115vh;
grid-template-columns: auto;
align-items: center;
justify-content: center;
width: 97%;
}
.serv .grid{
margin: 3px;
background: white;
width: 300px;
height: 150px;
}
.scro{
display: inline-block;
align-items: center;
justify-content: center;
grid-template-columns: auto auto auto;
width: 85%;
padding: 10;
margin-left: -20px;
/* background-color: rgba(36, 2, 46, 0.123); */
border-radius: 100px;
transform: translateX(0px);
}
.scro .items{
display: inline-block;
font-family: sans-serif;
background-color: rgba(167, 2, 167, 0.993);
padding: 20px 10px;
border-radius: 15px;
width: 80%;
margin: 20px 30px;
}
.why{
position: absolute;
width: 100%;
background: purple;
color: yellow;
margin-top: 1200px;
text-align: center;
color: white;
padding: 10px 0px;
font-size: 16px;
}
}
@media screen and (max-width:900px){
.main{
width: 80%;
}
}
@media screen and (max-width:700px){
.serv .grid{
margin: 0px;
background: white;
width: 300px;
height: 150px;
font-size: 15px;
}
.main{
width: 100%;
}
.popup .popup-content{
max-width:70%;
}
.popup .popup-content h2{
margin:0;
padding:0;
}
.popup .popup-content p{
padding:0;
margin:0;
}
}
@media screen and (max-width:500px){
.main{
width: 100%;
}
.popup .popup-content{
max-width:70%;
}
.popup .popup-content h2{
margin:0;
padding:0;
}
.popup .popup-content p{
padding:0;
margin:0;
}
}
@keyframes size {
0%{ font-size: 18px; }
20% { font-size: 20px; }
100% { font-size: 18px; }
}
@keyframes fade {
0%{ opacity: 0; margin-top: 10px; background-color: purple;}
100% { opacity: 1; }
}
@keyframes fadeup {
0%{ z-index: 10; opacity: 0.4; margin-top: -70px; }
100% { opacity: 1; }
}
@keyframes btn-fade {
0% { opacity: 0; width: 0px;}
70%{ opacity: 0; width: 10px;}
100% { opacity: 1; }
}
@media only screen and (max-width:700px) {
.main .top .logo h3{
/* display: none; */
font-size: 15px;
font-weight: 800;
}
.main .top .logo img{
width: 60px;
height: 60px;
margin-top: 10px;
margin-left: 10px;
}
.main .banner img{
position: absolute;
width: 90%;
margin-top: -50px;
/* background: red; */
}
.main .banner{
background-color: black;
}
.main .banner h2{
width: 83%;
text-align: center;
/* margin-left: 30px; */
padding: 30px;
/* margin-top: 250px; */
top: 30%;
background: linear-gradient(to right, purple, rgba(128, 0, 128, 0.342));
color: white;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.main .banner .logo{
margin-top: 80px;
z-index: 100;
}
.main .banner .logo h3{
display: none;
}
}