@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@600&family=Montserrat+Alternates:wght@600&family=Nunito+Sans:ital,wght@0,200;1,300;1,400&family=Ubuntu:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@600&family=Nunito+Sans:ital,wght@0,200;1,300;1,400&family=Ubuntu:wght@300&display=swap');
:root{
    --main-color-70:#00272c;
    --main-color-50:#05a1b6;
    --main-color-30:#09d3ee;
    --main-color-10:#bdf0f7;
}
html{
    scroll-behavior: smooth;
    
}
*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
   
}
.clientnumber_div{
    display: none;
}
.about_img{
    background-image: url('https://outlinesdesign.com/wp-content/uploads/2019/08/free-website.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height:300px;
}
.about_img h2{
text-align:center;
font-size: 90px;
line-height:240px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color:white;
}
#Aboutus_div{
    padding-bottom:15%;
}
#Aboutus_div #aboutinformation{
    text-align: justify;
    color:rgb(82, 81, 81);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    width:80%;
    margin-left:auto;
    margin: 3% auto;
    margin-right:auto;
}
.aboutDetail_twodiv{

    width:80%;
    margin:2% auto;
    height:300px;
    box-shadow: 2px 2px 10px rgb(201, 200, 200);
    border-radius:10px;
    overflow: hidden;


}
.aboutDetail_twodiv img{
width:100%;
height:150px;
}
.aboutimag_blend{
background-color: rgba(17, 20, 26, 0.342);
height:300px;
}
.aboutDetails{
    width:80%;
    margin: 3% auto;
    display: grid;
    grid-template-columns: 33% 33% 33%;

}
.AboutCounter_div{
    display: grid;
    width:600px;
    margin: 7% auto;
    grid-template-columns: 50% 50%;
}
.AboutCounter_div h3{
color:rgb(0, 66, 68);
font-size: 40px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.AboutCounter_div h4{
    text-align:center;
color:rgb(73, 72, 73);
font-size: 23px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;


}
.AboutExperience_div{
    text-align: center;
  
  
}
.Aboutclient_div{
    text-align: center;
  
}

.customerhearder p{
    color: rgb(245, 241, 2);
    text-shadow: 8px 8px 10px black;
    font-size:60px;
    text-align: justify;
}
.customerhearder{
    background-image: url('https://i.pinimg.com/736x/e6/14/30/e614307b5cfb33c7c8daede209f5e0e7.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height:250px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 6% 3%;
  
}
.connect_div{
    padding:4%;
  
}
.connect_div h3{
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 22px;
padding: 2%;

  
}
.connect_div h4{
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 17px;
padding: 2%;
color: rgb(90, 89, 89);
display: inline;
}
.connect_div a{
float: right;
text-decoration: none;
font-size: 17px;

}
.connect_div summary{
    cursor: pointer;
    font-size: 22px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    color: rgb(41, 40, 40);
    margin: 1% 0%;
 
    padding: 3%;
    border-bottom: 1px solid rgb(218, 218, 218);
}
#customercare_page{
    background-color: rgb(238, 238, 238);
}
#customercare_page h2{
font-size: 40px;
font-family:Arial, Helvetica, sans-serif;
padding: 4%;
}
.customerForm_div{
    margin-bottom: 20%;
padding: 3%;
}
.customerForm_div form input{
border-bottom:none;

margin-bottom:1%;

border-top: none;
border-left: 2px solid rgb(0, 100, 146);
border-right: 2px solid rgb(0, 100, 146);
padding:4%;
width:100%;
border-radius: 7px;
    }
    .customerForm_div h3{
        text-align: center;
        font-size: 30px;
        color: deepskyblue;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    .customertwodiv{
        display: grid;
        grid-template-columns: 50% 50%;
     
    }
    .customerForm_div table tr td{
padding: 1.5%;
    }

 #backbtn{display:none;}
#websiteDesign_page h2{
    font-size: 25px;
    text-align: center;
font-family:cursive;
color: rgb(0, 94, 94);
  }
    .websites_Div{
        margin-bottom:15%;
        background:none;
        padding: 2%;
        display: grid;
        grid-template-columns: 23% 23% 23% 23%;
gap: 2%;
    }
    .websites_Div a{
        margin-left: auto;
        margin-right: auto;
        box-shadow: 2px 2px 10px gray;
     overflow: hidden;
    border-radius: 7px;
text-align: center;
text-decoration: none;
color: rgb(0, 94, 94);
padding: 2%;
width:90%;
height: 200px;
    }
   
    .websites_Div a img{
        border-radius: 7px;
     display: block;
     width:100%;
     height: 170px;
     transition: all 0.4s ease;

             }

             .websites_Div a img:hover{
             transform: scale(1.1);
             }

#destop_background{
display: grid;
grid-template-areas: "desktop_bgsearch  desktop_bgsearch desktop_bgsearch"
" desktop_bgslidenav desktop_bghome desktop_bghome"
"desktop_bgfooter desktop_bgfooter desktop_bgfooter";
}

#searchdesigndestop{
float:right;
text-align: left;
border-left: 2px solid rgb(0, 118, 122);
border-right: 2px solid rgb(0, 118, 122);
border-top:none;
border-bottom:none;
margin: 1% 0%;
color:var(--main-color-70);
border-radius: 5px;
padding: 0px;
width:400px;
display: flex;
height:45px;
overflow: hidden;
}


#searchdesigndestop #searchbtn {
color: white;
cursor: pointer;
padding: 10px;
border: none;
width: 10%;
border-radius: 0px 5px 5px 0px ;

}
#searchbtn img{
width:100%;
}

#searchdesigndestop input {
border-radius: 10px 0px 0px 10px;

border: none;
padding: 10px;
width: 80%;
}

#searchdesigndestop span {
text-align: center;
padding: 10px;
width: 10%;
}
#searchdesigndestop span img{

width: 130%;
}
#desktop_nav_div{
grid-area: desktop_bgsearch;
background-color: white;
display: grid;

grid-template-areas: "desktoplogoimg desktopnav"
"desktoplogoimg desktopsearch" ;
grid-template-columns: 20% 80%;

}
#desktop_logoimage{
grid-area: desktoplogoimg;
width:100px;
margin: 0% 30%;
}
#destop_nav{

overflow: hidden;
grid-area: desktopnav;
padding: 2%;
background-color: var(--main-color-70);;
text-align: center;
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 21% 100%, 0 4%, 0 0);



}
#destop_nav a{
font-size: 19px;
padding: 1% 3%;
color:white;
text-decoration: none;
border-radius: 5px;
border-left: 2px solid var(--main-color-70);
border-right: 2px solid var(--main-color-70);
background:none;
}
#destop_nav a:hover{

background-color: #10d2eb15;
border-left: 2px solid white;
border-right: 2px solid white;
}
.desktop_search{

margin: 3px 5%;
grid-area:desktopsearch;
}


#destop_home{
grid-area: desktop_bghome;
height:100%;
width:100%;
padding: 0px 2%;
background-color: rgb(234, 237, 241);

}

#home_div{
    display: grid;
    grid-template-columns: 50% 50%;
}
#home_div img{
    width:100%;
    animation: Home_imageChange 2s ease;
    transform-style: preserve-3d;
  
    
}
@keyframes Home_imageChange{
    0%{
      transform: rotateY(0deg);

    }
    25%{
    
transform: rotateY(90deg);
        /* position: relative;  
        top:-10px;
        left:-5px */
    }
    50%{
    transform: rotateY(180deg);
            }
            100%{
            transform: rotateY(360deg);
             
            }
}

.desktop_mainheading{
margin:15% 5%;
}
.desktop_mainheading h1{
margin:2% 0%;
font-size: 60px;
color:rgb(0, 103, 121);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
} 
.desktop_mainheading h3{
margin:2% 0%;
font-size: 25px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} 
.desktop_mainheading p{
margin:2% 0%;
font-size: 15px;
text-align: justify;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} 
#desktoporderbtn{
    border-top: none;
    border-bottom: none;
    transition: all 0.5s ease;
border-left: none;
border-right: none;
margin:4px 0%;
font-size: 20px;
font-weight: bold;
background-color:var(--main-color-70);
color:rgb(255, 255, 255);
padding:2%;
width:120px;
border-radius: 4px;
cursor: pointer;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} 
#desktoporderbtn:hover{
    border-left: 2px solid var(--main-color-70);;
    border-right: 2px solid var(--main-color-70);;
    border-top:none;
    border-bottom:none;
    background-color:#05a1b610;
    color:var(--main-color-70);
}
#backbtn_orderbtnflex{
    display: none;
    text-align: center;
}
#desktoporderbtnin{
    border-top: none;
    border-bottom: none;
    transition: all 0.5s ease;
border-left: none;
border-right: none;
display: block;
margin-left: auto;
height:50px;
font-size: 15px;
font-weight: bold;
background-color:var(--main-color-70);
color:rgb(255, 255, 255);
padding:2%;
width:80px;
border-radius: 4px;
cursor: pointer;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} 
#desktoporderbtnin:hover{
    border-left: 2px solid var(--main-color-70);;
    border-right: 2px solid var(--main-color-70);;
    border-top:none;
    border-bottom:none;
    background-color:#05a1b610;
    color:var(--main-color-70);
}
#desktopreadbtn{
    border-top: none;
    border-bottom: none;
    transition: all 0.5s ease;
border-left: none;
border-right: none;
margin:4px 0%;
font-size: 20px;
font-weight: bold;
background-color:#05a1b610;
color:rgb(255, 255, 255);
padding:2%;
width:120px;
border-radius: 4px;
cursor: pointer;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-left: 2px solid var(--main-color-70);
border-right: 2px solid var(--main-color-70);
color:var(--main-color-70);
} 
#desktopreadbtn:hover{
    border-left: 2px solid var(--main-color-70);;
    border-right: 2px solid var(--main-color-70);;
    border-top:none;
    border-bottom:none;
    background-color:#05a1b610;
    color:var(--main-color-70);
}
#searchdesign{
  
    
        position:sticky;
        top:0px;
        left:0px;
        z-index: 1;
overflow: hidden;
text-align: left;
border: 1px solid #c7ced4;
border-radius: 10px;
padding: 0px;
width:40%;
display: flex;
margin-left: 3%;
margin-top:4%;
margin-bottom:5%;
height:45px;
}


#searchbtn {
    color: white;
    cursor: pointer;
    padding: 10px;
    border: none;
    width: 10%;
    border-radius: 0px 10px 10px 0px ;
    
    }
    #searchbtn img{
    width:100%;
    }
    
    #searchdesign input {
     border-radius: 10px 0px 0px 10px;
    border: none;
    padding: 10px;
    width: 80%;
    }
    
    #searchdesign span {
      text-align: center;
    background-color: white;
       width: 10%;
       }
       #searchdesign span img{
       
         width: 80%;
         }


#slide_nav{
padding-top:50px;
width:100%;
background-color: rgb(234, 237, 241);
height: 100%;

grid-area: desktop_bgslidenav;
}
#slide_nav button img{
    
    width:70%;
 
    }
    #slide_nav button img:hover{
    
        width:65%;
     
        }
    #slide_nav p{
        margin-bottom:20px;
        margin-left: 7px;
  
        font-size: 10px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }  
#slide_nav button{
    overflow: hidden;
display: block;
margin:5px 10px;
font-size: 20px;
width:50px;
height:50px;
border-radius: 8px;
border: none;
color:rgb(0, 118, 122);
cursor: pointer;
transition: all 0.5 ease;
border-top: 2px solid var(--main-color-70);
border-bottom: 2px solid var(--main-color-70);
transition: all 0.4s ease;
background:none ;
}
#slide_nav button:hover{
background:rgb(255, 255, 255);
color:var(--main-color-70);
border-left: 2px solid var(--main-color-70);
border-right: 2px solid var(--main-color-70);
border-top: none;
border-bottom: none;
}
#websiteForm{
    width:100%;
    height:100%;
    box-shadow: 5px 5px 10px rgb(187, 186, 186);
    border-radius: 7px;
    padding: 3% 3%;
    
    margin-bottom:20%;
    background-color: rgba(255, 252, 252, 0.63);
    
            }
            #websiteForm form input{
    border-bottom:none;
    
    margin-bottom:1%;
    
    border-top: none;
    border-left: 2px solid rgb(0, 100, 146);
    border-right: 2px solid rgb(0, 100, 146);
    padding:4%;
    width:100%;
    border-radius: 7px;
            }
            #websiteForm h3{
                text-align: center;
                font-size: 30px;
                color: deepskyblue;
                font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            }
            .website_formdiv{
                display: grid;
                grid-template-columns: 50% 50%;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                color: rgb(0, 96, 160);
            }
            .website_formdiv table tr td{
    padding: 1.5%;
            }
            #FormCategories_page{

                display: grid;
                grid-template-columns: 33% 33% 33%;
                padding: 5%;
               
            }
            .applycard{
                border-radius: 7px;
                background:linear-gradient(rgb(0, 128, 160),rgb(0, 50, 70));
                height:300px;
                margin:2% 6%;
                text-align: center;
                color: white;
                box-shadow: 2px 2px 10px rgb(102, 101, 101);
                cursor: pointer;
                transition: all 0.6s ease;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            }
            .applycard:hover{
                box-shadow: 8px 8px 10px rgba(214, 213, 213, 0.753);
                
                margin-top:-5px;
                margin-bottom: 3%;
            }
            #FormCategories_page img{
    width:60%;
            }
.desktop_footer{

grid-area: desktop_bgfooter;

}

footer{
background-color: var(--main-color-70);
display:grid;
grid-template-columns: 25% 25% 25% 25%;
height:400px;
padding: 3%;
}
footer img{
background-color: #ffffff;
width:80%;
box-shadow: 1px 1px 10px rgb(10, 10, 10);
border-radius:14px;
}
footer a{
font-size: 18px;
margin: 7%;
display:block;
text-decoration: none;
color: #ffffff;
}
#WebsitePage{
    display: none;
    }

 
#firstintropage{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index: 100;
}
#firstintropage img{
   
    width:100%;
    height:100%;
    
}
#mainsearch_div{
 transition: all 1.3s ease;
    background-color: white;
    width:100%;
    position: absolute;
    top:-140px;
    left:0px;
}
#firstnav{
    z-index: 2;
    background-color: white;
 position: absolute;
 width:100%;
    padding:0% 3%;
    height:55px;
display: grid;
text-align: center;
grid-template-columns: 10% 80% 10%;
}
#firstnav h4{
    margin-top: auto;
    margin-bottom: auto;
    font-size: 25px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    color:var(--main-color-70);
}
#firstnav h3 img{
    width:25px;
    margin-top: 16px;
    cursor: pointer;
   
}
#firstnav img{
    width:48px;
}
#ALEART_GIRL{
  
  
    width:100%;
    height:100%;

    background:none;
    padding: 0% 2%;

}
.Call_girl_div{
    width:120px;
    margin-top: 120px;
    margin-left:auto ;
    margin-right:auto;
}
.Call_girl_div img{
    margin-bottom: -10px;
animation: Call_girlflytop 3s ease;
    width:100%;
    filter: drop-shadow(3px 0.3px 4px rgb(105, 104, 104));
}
@keyframes Call_girlflytop{
    from{
margin-top: 300px;
    }
    to{
        margin-top: 0px;
    }
}

#flyingmessage1{
    background-color: #f0ffff;
    opacity: 0;
    position: absolute;
    top:300px;
    left:5%;
    padding-top:6%;
    border-radius:50% 50% 0% 50%;
    width:100px;
    height:90px;
    border:3px solid black;
    font-size: 12px;
    font-weight: 700;
    animation: flyingamimation 7s ease;
    animation-delay: 4s;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
@keyframes flyingamimation{
0%{
position: absolute;
top:17%;
    left:20%;
opacity: 0;
}
25%{
position: absolute;
top:10%;
    left:10%;
opacity: 1;
}
75%{
position: absolute;
top:10%;
    left:10%;
opacity: 1;
}
100%{
position: absolute;
top:17%;
    left:20%;
opacity: 0;
}
}
#flyingmessage2{
    text-align: center;
background-color: #f0ffff;
    opacity: 0;
    position: absolute;
    top:5%;
    left:20%;
    padding-top:6%;
    border-radius:50% 50% 50% 0%;
    width:100px;
    height:90px;
    border:3px solid black;
    font-size: 12px;
    font-weight: 700;
    animation: secondflyingamimation 7s ease;
    animation-delay: 10s;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
@keyframes secondflyingamimation{
0%{
position: absolute;
top:17%;
    left:50%;
opacity: 0;
}
25%{
position: absolute;
top:10%;
    left:70%;
opacity: 1;
}
75%{
position: absolute;
top:10%;
    left:70%;
opacity: 1;
}
100%{
position: absolute;
top:17%;
    left:50%;
opacity: 0;
}
}
.information_girl{
overflow: hidden;
width:90%;
height:200px;
box-shadow: 3px 0.3px 4px rgb(105, 104, 104);
margin:0px 5%;
border-radius:10px;
background: linear-gradient(rgb(47, 180, 241), rgb(0, 74, 143));
padding: 4% 10%;


}

#informationgirlnfcbtn{
    cursor: pointer;
  
    color:white;
width:70px;

height:40px;
box-shadow: 3px 0.3px 4px rgb(105, 104, 104);
border:none;
display: none;
border-radius:10px;
background: linear-gradient(rgb(27, 161, 0), rgb(19, 66, 0));
padding: 1% 4%;

}
#informationgirlcardbtn{
    cursor: pointer;
   
    color:white;
  
width:70px;
height:40px;
box-shadow: 3px 0.3px 4px rgb(105, 104, 104);
border:none;
display: none;
border-radius:10px;
background: linear-gradient(rgb(27, 161, 0), rgb(19, 66, 0));
padding: 1% 4%;

}
#informationgirlwebbtn{
    cursor: pointer;
   
    color:white;
width:70px;
height:40px;

box-shadow: 3px 0.3px 4px rgb(105, 104, 104);
border:none;
display: none;
border-radius:10px;
background: linear-gradient(rgb(27, 161, 0), rgb(19, 66, 0));
padding: 1% 4%;

}




.information_girl h3{
color:white;
text-align: center;
font-size: 25px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.information_girl ul{
font-family: 'Gill Sans','Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
opacity: 0;
color:white;
font-size: 19px;
list-style: disc;
animation: watchnotes;
animation-duration: 4s;
animation-timing-function: ease;
animation-delay: 4s;
transition: all 2s ease;
animation-fill-mode: forwards;

}
@keyframes watchnotes{
from{
margin-left: -1000px;
opacity: 0;
}
to{
margin-left: 10px;
opacity: 1;
}
}


    #carddesign_h2{
        text-align: center;
        margin-bottom: 5%;
        font-family:cursive;
        font-size: 30px;
        color:var(--main-color-50);
    }
    #carddesign_h2 img{
        width:100px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #social_media_popup{
        border-radius: 10px;
        z-index:100;
        background-color:var(--main-color-70);
                box-shadow:-2px -2px 30px rgba(128, 128, 128, 0.582);
                transition: all 1s ease-in;
                padding-top:20px;
                height:290px;
                position: fixed;
                bottom:-150%;
                left:0%;
                width: 100%;
    }
    #social_media_popup img{
background-color: white;
    }
    #social_media_popup h2{
        text-align: center;
        color:var(--main-color-70);
        margin-top:8%;

        cursor: pointer;
        padding:17px;
        background-color: #ffffff;
    
    }
            .social_mediaicon{
                display:grid;
                grid-template-columns: 33% 33% 33%;
            }
    
    #searchclosebtn{
        display:none;
    }
            .social_mediaicon img{
                width:40px;
                display:block;
                height:40px;
                margin-left: auto;
                margin-right: auto;
                border-radius: 50%;
                
            }
            .social_mediaicon div{
                text-align: center;
    padding: 7%;
    border-radius: 8px;
    cursor: pointer;
            }  .social_mediaicon div{
              
                transition: all 0.6s ease;
                transform: translateY(0px);
               
              }
            .social_mediaicon div:hover{
              transform: translateY(-4px);
            }
            .social_mediaicon a{
                
                color: white;
                text-decoration: none;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
            }
            #searchnav{
                display: grid;
                grid-template-columns: 50% 50%;
            }
            #searchnav a{
  
        display: block;
        text-decoration: none;
        background-color: white;
        color:black;
        box-shadow: 2px 2px 6px  rgb(216, 213, 213);
        padding:6px 10px;
        align-items:center;
        margin: 2%;
        border-radius: 7px;
        font-size: 20px;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
     display: grid;
     grid-template-columns: 20% 75% 5%;
       

    }
    #searchnav a:hover{
        margin-left: 1%;
        box-shadow: 2px 2px 6px  rgb(155, 151, 151);
    }
    #searchnav a B{
  font-weight: 100;
  color: rgb(66, 65, 65);
}

#searchnav a h3{
        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        display: inline;
font-size:15px ;
    padding:0% 2%;
    font-weight:100;
    }

    #searchnav a p{
      display: none;
    }
    #searchnav a img{
        display: inline;
        width:40px;
        height: 40px;

        border-radius: 50%;
        margin-left: 3%;
        margin-right: 3%;
        border: 4px double rgb(0, 97, 177);
    }

  


#DESKTOP{
display: none;
}
#SelectImage_div{
padding:3%;
margin: 0px;
border-radius: 10px;
background:none;
display:flex;
overflow: scroll;
}

#SelectImage_div img{
width:259px;
border-radius: 10px;
margin: 1%;
cursor: pointer;
border: 3px solid rgba(255, 255, 255, 0);
}
#SelectImage_div img:hover{
border: 3px solid rgb(8, 82, 218);
}
#from_div{
    width:1200px;
    
}
#Form_InputDiv h4{
    font-size: 27px;
    margin: 0px;
    background:none;
    color:rgb(0, 87, 128);
    text-align: center;
    
    }
#from_div label{
    width:100%;
    background: linear-gradient(rgb(0, 71, 104),rgb(0, 37, 61));
    color:white;
    border:none;
    text-align: center;
    height:30px;
    padding: 15px;
    font-size:17px;
    border-radius:20px;
    cursor: pointer;
    margin-top:10%;
    display: inline;
    
    }
    #cardformtwodiv{
        display:grid;
        grid-template-columns: 50% 50%;
    }
    #from_div input{
        border-bottom:none;
    
        margin-bottom:1%;
        
        border-top: none;
        border-left: 2px solid rgb(0, 100, 146);
        border-right: 2px solid rgb(0, 100, 146);
        padding:2%;
        width:98%;
        border-radius: 7px;
        
        }
#ChooseImage{
    display:none;
    }
    #uploadphoto{
    width:15%;
    
    height:150px;
    border-radius:10px;
    border: 1px solid #034926;
    background:none;
    overflow: hidden;
    }
    #uploadphoto img{
    width:100%;
    height:max-content;
    
    
    }
    .uploadimage_group{
    padding-left: 24%;
    padding-right: 0%;
    
    }
    #uploadphoto{
    margin-left:2%;
    }
    form{
    font-size: 20px;
    }
    #SubmitBtn{
    background: linear-gradient(rgb(4, 136, 197),rgb(1, 85, 153));
    color:white;
    font-size: 20px;
    margin-left:auto;
    margin-right: auto;
    width:30%;
    padding: 1%;
    border: none;
    border-radius: 8px;
    }
#SelectImage_div{
    padding:3%;
    margin: 0px;
    width:98%;
    border-radius: 10px;
    background:none;
    display:flex;
    overflow: scroll;
    }
    
    #SelectImage_div img{
    width:259px;
    border-radius: 10px;
    margin: 1%;
    cursor: pointer;
    border: 3px solid rgba(255, 255, 255, 0);
    }
    #SelectImage_div img:hover{
    border: 3px solid rgb(8, 82, 218);
    }
.footerAatch{
   border-radius:0px;
   margin:0px;
font-size:10px;
    display:grid;
grid-template-columns: 20% 20% 20% 20% 20%;
padding:0%;
width:100%;
align-items:center;
background-color: var(--main-color-70);
position: fixed;
bottom:0px;
height:8%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.footerAatch button{
margin:3px auto;
    width:30px;
    height:27px;
    display: block;
    text-align: center;
   border-radius:20%;
   padding: 1%;
   align-items:center;
   background:none;
   border:none;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.8s ease;
   
}  
.footerAatch button:hover{
    box-shadow: 2px 2px 2px rgb(37, 37, 37);
    margin:2px auto;
}


.Email{
color:white;
font-weight: 700;
text-align: center;
cursor: pointer;
padding: 4px;
}
.Email:hover{
background-color: rgba(73, 70, 70, 0.219);


}

.Card_design button i{
font-size: 25px;
color: white;
}
.Card_design button i:hover{
    
    color: rgb(1, 240, 140);
    }
.Card_design{
color:white;
align-items: center;
text-align: center;
cursor: pointer;
padding: 4px;
}
.Card_design:hover{
    border-top: 3px solid rgb(255, 255, 255);
background-color: rgba(58, 56, 56, 0.219);

}
.My_Profile{
    align-items: center;
color:white;
font-weight: 700;
text-align: center;
cursor: pointer;
padding: 4px;
}
.My_Profile:hover{
background-color: rgba(58, 56, 56, 0.219);
border-top: 3px solid rgb(255, 255, 255);
}
.form{
color:white;
font-weight: 700;
text-align: center;
cursor: pointer;
padding: 4px;
}
.form:hover{
background-color: rgba(58, 56, 56, 0.219);
border-top: 3px solid rgb(255, 255, 255);
}
#WebsitePage h1{
text-align:center ;
padding:4%;
font-family: 'Nunito Sans', sans-serif;
color:var(--main-color-70);
}
#businesscardimg{
margin-top: 45px;
border: none;
width:100%;
height:230px;
}
#WebsitePage p{
width:90%;
margin:0% auto;
padding-bottom:2%;
font-family: 'Cormorant Infant', serif;
text-align:justify;
}
#WebsitePage #startbusinessbtn{
margin-left:15%;
margin-right:auto;
padding: 3%;
border:none;
background-color: var(--main-color-70);
border-radius: 8px;
color:white;
margin-bottom:2%;
font-size:16px;
cursor: pointer;
width:70%;
transition: all 0.5s ease;

}
#WebsitePage #startbusinessbtn:focus{
transform: scaleX(0.9);
background-color: #05c2db;
}
#startwebsitebtn{
padding: 3%;
border:none;
background-color: var(--main-color-70);
border-radius: 8px;
color:white;
font-size:16px;

width:70%;
cursor: pointer;
margin-left:15%;
margin-right:auto;
}
#WebsitePage #startwebsitebtn:focus{
transform: scaleX(0.9);
}



#My_Profile_webpage{
background-image: url('https://i.pinimg.com/originals/6d/94/00/6d94004aee6e44fcac37ddf05163381e.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.logo_div{
width:90%;
margin-left:5%;
margin-top:5%;
height:200px;
border-radius:27px;
border: 4px solid #CD9933;
background-color: #CD9933;
overflow: hidden;
}

.logo_div img{
width:100%;

}
#ProflieName{
font-size:30px;
}
.ProflieName_Div{
    border: 4px solid #2C3240;
text-align: center;
    color:white;
    padding:15% 5% 5% 5%;


    width:80%;
margin-left:5%;
margin-top:5%;
height:200px;
border-radius:27px;
background-color: #2C3240;
}

.ProflieName_Div h4{
color: #be6cf5;
font-size: 18px;;
}
#image_div{
    width:150px;
    height:150px;
    border:10px solid rgb(255, 255, 255);
    border-radius: 50%;
    background-color: rgb(202, 222, 240);
    position: absolute;
    top:17%;
    left:28%;
    overflow: hidden;
}
#image_div img{
    width:100%;

}
#infromation_button_div{
    margin-top:5%;
    margin-left: 7%;
    margin-right: 7%;
    display:grid;
    grid-template-columns:100%;
}
    #infromation_button_div button{
        color:white;
        font-size: 17px;
        text-align: left;
 width:100%;
 height:50px;

 margin-top:0px;
 margin-bottom: 3%;
 border-radius:15px;
 background:linear-gradient(#6416d1,#371269);
 border:none;
 box-shadow: 3px 3px 10px rgb(92, 88, 88);
 cursor: pointer;
 transition: all 0.6s ease;
}
#infromation_button_div a{
    margin-left:auto;
    margin-right:auto;
    width:80%;
}
         #infromation_button_div button:focus{
transform: scaleX(0.9);
background: none;
box-shadow: 0px 0px 10px rgb(92, 88, 88);
color:#384b77;
}
.footermyprofile{
   border-radius: 30px;
   margin:0px;
font-size:14px;
    display:grid;
grid-template-columns: 25% 25% 25% 25%;
padding:2%;
width:100%;
background-color: #8132BF;
position: fixed;
top:90%;
left:-8px;
height:200px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.footermyprofile button{

margin-left: auto;
margin-right: auto;
    width:25px;
    height:25px;
    display: block;
   border-radius:50%;
   background-color: rgba(255, 255, 255, 0.308);
   border:none;
}  

.Email{
color:white;
font-weight: 700;
text-align: center;
cursor: pointer;
padding: 4px;
}
.Email:hover{
background-color: rgba(58, 56, 56, 0.219);
border-radius:10px;
}
.Social{
color:white;
font-weight: 700;
text-align: center;
cursor: pointer;
padding: 4px;
}
.Social:hover{
background-color: rgba(58, 56, 56, 0.219);
border-radius:10px;
}
.location{
color:white;
font-weight: 700;
text-align: center;
cursor: pointer;
padding: 4px;
}
.location:hover{
background-color: rgba(58, 56, 56, 0.219);
border-radius:10px;
}
.form{
color:white;
font-weight: 700;
text-align: center;
cursor: pointer;
padding: 4px;
}
.form:hover{
background-color: rgba(58, 56, 56, 0.219);
border-radius:10px;
}


#qrcode_div{
height:130px;
width:130px;
border: 2px double black;
border: 7px;
margin-top: 2%;
margin-left:auto;
margin-right: auto;
}
#qrcode_div img{
width:100%;
border: 7px;
}
.saveimgbtn{
display:none;
}

.carddesignpage{
    display:grid;
    width:90%;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 25% 25% 25% 25%;
    gap: 2%;
    margin-bottom: 20%;
}
.carddesignpage a{
text-decoration: none;
}
#cardimg_div{
    width:100%;
   transition: all 0.4s ease;
   cursor: pointer;
   border-radius: 10px;
   border: 6px solid rgb(31, 30, 30);
   box-shadow: 4px 4px 10px rgb(116, 116, 116);

}
#cardimg_div:hover{
   margin-top: -7px;
   margin-bottom: 7px;
  box-shadow: 4px 4px 20px rgb(124, 123, 123);

}
#cardimg_div img{
    width:100%;
    height:100%;
    border-radius: 5px;
}
#cardimg_div P{
    border-radius: 10px;
    padding: 5px;
    font-weight:bold;
    margin:3px;
text-align: center;
color:rgb(255, 255, 255);
background-color: rgb(0, 132, 255);
    
}

@media(max-width:700px){
    .customertwodiv{
        display: grid;
        grid-template-columns: 100%;
     
    }
    .customerhearder{
    background-image: url('https://i.pinimg.com/736x/e6/14/30/e614307b5cfb33c7c8daede209f5e0e7.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height:250px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 6% 3%;
    color: rgb(245, 241, 2);
    text-shadow: 8px 8px 10px black;
    font-size: 25px;
    text-align: center;
}
    #informationgirlnfcbtn{
        cursor: pointer;
      
        color:white;
    width:70px;
    display: none;
    height:40px;
    box-shadow: 3px 0.3px 4px rgb(105, 104, 104);
    border:none;
    margin:4% 40%;
    border-radius:10px;
    background: linear-gradient(rgb(27, 161, 0), rgb(19, 66, 0));
    padding: 1% 4%;
    
    }
    #informationgirlcardbtn{
        cursor: pointer;
       
        color:white;
        display: none;
    width:70px;
    height:40px;
    box-shadow: 3px 0.3px 4px rgb(105, 104, 104);
    border:none;
    margin:4% 40%;
    border-radius:10px;
    background: linear-gradient(rgb(27, 161, 0), rgb(19, 66, 0));
    padding: 1% 4%;
    
    }
    #informationgirlwebbtn{
        cursor: pointer;
       
        color:white;
    width:70px;
    height:40px;
    display:none;
    box-shadow: 3px 0.3px 4px rgb(105, 104, 104);
    border:none;
    margin:4% 40%;
    border-radius:10px;
    background: linear-gradient(rgba(27, 161, 0, rgba(19, 66, 0, 0.541), 66, 0));
    padding: 1% 4%;
    
    }


    #FormCategories_page{
        display: grid;
        grid-template-columns: 100%;
        
        padding-bottom:30%;
    }
    .applycard{
        border-radius: 7px;
        background:linear-gradient(rgb(0, 128, 160),rgb(0, 50, 70));
        height:250px;
        
        margin:3%;
        text-align: center;
        color: white;
        box-shadow: 2px 2px 10px rgb(102, 101, 101);
        cursor: pointer;
        transition: all 0.6s ease;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    .website_formdiv{
        display: grid;
        grid-template-columns: 100%;
        margin: 2% auto;
      
    }
    #from_div{
        width:100%;
    }
    #from_div input{
    border:1px solid rgb(196, 192, 192);
    width:100%;
    border-radius: 5px;
    margin-bottom:3%;
    margin-top:1%;
    padding:17px;
    
    }
    #cardformtwodiv{
        display:grid;
        grid-template-columns: 100%;
    }
    #aboutinput{
        height:200px;
    }
    #from_div label{
    width:60%;
    background: linear-gradient(rgb(4, 136, 197),rgb(1, 85, 153));
    color:white;
    border:none;
    text-align: center;height:30px;
    padding: 15px;
    font-size:17px;
    border-radius:20px;
    cursor: pointer;
    margin-top:10%;
    display: inline;
    
    }
    #Form_InputDiv{
    background:linear-gradient(to right,rgb(143, 122, 3),gold,rgb(143, 122, 3));
    border-radius: 7px; 
    margin:1px;
    padding:4%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    box-shadow: 2px 2px 10px rgb(80, 79, 79);
    }
    #Form_InputDiv h4{
    font-size: 27px;
    margin: 0px;
    background:none;
    color:rgb(12, 12, 11);
    text-align: center;
    
    }
    #Form_InputDiv h3{
    text-align: center;
    color:white;
    border-radius: 8px;;
    margin: 0px;
    padding: 1%;
    background-color: rgb(24, 26, 26);
    font-size: 35px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    #ChooseImage{
    display:none;
    }
    #uploadphoto{
    width:40%;
    
    height:150px;
    border-radius:10px;
    border: 1px solid #034926;
    background:none;
    overflow: hidden;
    }
    #uploadphoto img{
    width:100%;
    height:max-content;
    
    
    }
    .uploadimage_group{
    padding-left: 24%;
    padding-right: 0%;
    
    }
    #uploadphoto{
    margin-left:12%;
    }
    form{
    font-size: 20px;
    }
    #SubmitBtn{
    background: linear-gradient(rgb(4, 136, 197),rgb(1, 85, 153));
    color:white;
    font-size: 20px;
    margin-left: 2%;
    }
    


    #searchnav{
        display: grid;
        grid-template-columns: 100%;
    }

    #searchnav a{
  
        display: block;
        text-decoration: none;
        color:black;
        box-shadow: 2px 2px 6px  rgb(216, 213, 213);
        padding:6px 10px;
        margin: 2%;
        border-radius: 7px;
        font-size: 20px;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
     display: grid;
     grid-template-columns: 20% 75% 5%;
       

    }
    #searchnav a:hover{
        margin-left: 1%;
        box-shadow: 2px 2px 6px  rgb(155, 151, 151);
    }
    #searchnav a b{
  
   
margin-top:auto;
margin-bottom:auto;}

#searchnav a h3{
        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        display: inline;
font-size:20px ;
    padding:4% 2%;
    }

    #searchnav a p{
      display: none;
    }
    #searchnav a img{
        display: inline;
        width:40px;
        height: 40px;
        border-radius: 50%;
        margin-left: 3%;
        margin-right: 3%;
        border: 4px double rgb(0, 97, 177);
    }
    #searchdesign {
        position:sticky;
        top:0px;
        left:0px;
overflow: hidden;
text-align: left;
border: 1px solid #c7ced4;
border-radius: 10px;
padding: 0px;
width:90%;
display: flex;
margin-left: auto;
margin-right:5%;
margin-top:4%;
margin-bottom:5%;
height:45px;
}


#searchbtn {
color: white;
cursor: pointer;
padding: 10px;
border: none;
width: 10%;
border-radius: 0px 10px 10px 0px ;

}
#searchbtn img{
width:100%;
}

#searchdesign input {
 border-radius: 10px 0px 0px 10px;
border: none;
padding: 10px;
width: 80%;
}

#searchdesign span {
  text-align: center;

   width: 10%;
   }
   #searchdesign span img{
   
     width: 100%;
     }
    #backbtn{
        font-weight:bold;
        font-size: 17px;
        border-radius: 20%;
        margin-top: 8px;
        background-color: #20242c50;
      cursor: pointer;
      padding: 1%;
        border:none;
        width:35px;
        height:35px;
        color:white;
        display:block;
       }
    #destop_background{
        display:none;
    }
    .carddesignpage{
        display:grid;
        grid-template-columns: 48% 48%;
        gap: 2%;
        width:98%;
        margin-left: auto;
        margin-right: auto;
    }
    #WebsitePage{
        display:block;
        
    }
    #backbtn_orderbtnflex{
        position: fixed;
  
        width: 100%;
      margin-bottom: 2%;
    display:grid;
    grid-template-columns: 10% 70% 20%;
    text-align: center;
}
    .websites_Div{
          
        display: grid;
        grid-template-columns: 100%;
gap: 2%;
    }
    #ALEART_GIRL{
        background-image: url('https://media.istockphoto.com/photos/out-of-focus-modern-building-lobby-background-picture-id484900666?k=6&m=484900666&s=170667a&w=0&h=vxirTezz19d9ZYiNhsmTVo_CrRIPJksuG1zNvepwgtw=');
      background-repeat: no-repeat;
      background-size:cover;
      background-attachment: fixed;
        width:100%;
        height:750px;
    position: fixed;
    left:0px;
    top:0px;
        background-color: #f0ffff;
        padding: 0% 2%;
    
    }
    .aboutDetails{
          
        display: grid;
        grid-template-columns: 100%;

    }
    .AboutCounter_div{
        text-align: center;
        display: grid;
        width:90%;
        margin: 4% auto;
        grid-template-columns: 50% 50%;
    }
 
}