*
{
    margin: 0;
    padding: 0;
    /* font-family: 'Baloo Bhaijaan 2', cursive; */
}
html
{
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body
{
    overflow-x:hidden;
}
/* INtroduction */
.introduction
{
    padding-left: 10.9vw;
    /* background-color: blanchedalmond; */
    /* background-image: url(/Images/First_background.jpg); */
    background-size: cover;
    height: 43vw;
    width: 100vw;
    animation-name: back;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    overflow: hidden;
}

@keyframes back 
{
    0%,100%  {background-image: url("https://cdn.pixabay.com/photo/2014/03/26/17/50/sunset-298850_1280.jpg"); transition:5sec;}
    25% {background-image: url("https://cdn.pixabay.com/photo/2017/08/07/22/10/church-2608425_1280.jpg"); transition:5sec;}
    50% {background-image: url("https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683_1280.png"); transition:5sec;}
    75% {background-image: url("https://cdn.pixabay.com/photo/2016/11/29/04/19/ocean-1867285_1280.jpg"); transition:5sec;}
}

/* header */
.header
{
    /* border: 2px solid black; */
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 9.7vw;
    padding-top: 2.4vw;
    margin-left: 16.5vw;
    
}
.nav
{
    /* border: 2px solid black; */
    display:flex;
    justify-content: center;
    flex-direction: row;
}
.company-name
{
    position: relative;
    bottom: 1vw;
    right: 15.6vw;
    font-size: 3.5vw;
    font-family: 'Concert One', cursive;
}

.nav-items
{
    /* border:2px solid red; */
    list-style: none;
    padding: 1.1vw;
}

a
{
    text-decoration: none;
}
.nav-items a
{
    padding: 0.3vw;
    font-family: 'Concert One', cursive;
    font-size: 1.3vw;

}
.nav-items a:hover
{
    background-color: #0000005c;
    border-radius: 13px;
    color: white;
    font-family: 'Concert One', cursive;
}




/* TEXT AREA */
.textarea
{
    display: flex;
    flex-direction: column;
    margin-left: 14vw;
    width: 32vw;
    height: 4vw;
    /* border: 2px solid black; */
    margin-top: 2.1vw;
    display: flex;
}

.heading
{
    /* border: 2px solid red; */
    font-size: 3vw;
    padding-bottom: 1vw;
    /* width: 36vw; */
    font-family: 'Concert One', cursive;
}
.info-text
{
    /* border: 2px solid red; */
    font-size: 1.4vw;
    padding-bottom: 1vw;
    /* width: 36vw; */
    font-family: 'Concert One', cursive;
};

.buttons
{
    /* border:2px solid red; */
    padding-bottom: 15px;
    /* width: 36vw; */
}

.btn1
{
    background-color: rgb(47, 34, 109);
    color: white;
    padding: 0.7vw;
    border: none;
    border-radius: 0.5vw;
    cursor: pointer;
    font-family: 'Oxygen', sans-serif;
    font-size: 1vw;

}
.btn2
{
    background-color: rgb(47, 34, 109);
    color: white;
    padding: 0.7vw;
    border: none;
    border-radius: 0.5vw;
    cursor: pointer;
    font-family: 'Oxygen', sans-serif;
    font-size: 1vw;

}
.btn1:hover
{
    background-color: rgb(219, 199, 13);
    color: black;
    padding: 0.7vw;
    border: none;
    transition: .5s ease;
    border-radius: 0.5vw;
    cursor: pointer;
    font-family: 'Oxygen', sans-serif;
    font-size: 1vw;

}

.btn2:hover
{
    background-color: rgb(219, 199, 13);
    color: black;
    padding: 0.7vw;
    border: none;
    transition: .5s ease;
    border-radius: 0.5vw;
    cursor: pointer;
    font-family: 'Oxygen', sans-serif;
    font-size: 1vw;
}


/* SECOND SECTION */

.second-section
{
    /* border: 2px solid black; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 15px;
    /* height: 34vw; */
    /* width: 40vw; */
    /* padding: 18vw; */
    padding-top: 4vw;
    align-content: center;
}

.heading2
{
    font-size: 3.5vw;
    font-family: 'Concert One', cursive;
}

.second-section2
{
    padding-top: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-direction: column;*/
}


.contact_info
{
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-direction: column; */
    padding: 2vw;
    padding-bottom: 3vw;
    border-bottom: 2px solid black;
    margin-bottom: 5vw;
}



.contactinfo1
{
    display:flex;
    justify-content:center ;
    align-items:center;
    flex-direction: column;

}
.info
{
    width: 13vw;
    margin-top: 2.6vw;
    margin-left: 2.6vw;
    margin-right: 2.6vw;
    margin-bottom: 0.8vw;
    text-align: center;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.1vw;
}

.contact-info-info
{
    margin-top: 1vw;
    color: purple;
    text-transform: capitalize;
    font-weight: bold;
}

.contact_info button
{
    background-color: rgb(47, 34, 109);
    color:rgb(240, 240, 240);
    padding: 0.7vw;
    border:none;
    border-radius: 0.5vw;
    cursor: pointer;
    font-family: 'Oxygen', sans-serif;
}
.contact_info button:hover
{
    background-color:rgb(219, 199, 13) ;
    color:black;
    padding: 0.7vw;
    border:none;
    cursor: pointer;
    border-radius: 0.5vw;
    font-family: 'Oxygen', sans-serif;
}

/* THIRD SECTION */
.projects-heading
{
    
    /* border: 2px solid red; */
    font-size: 3vw;
    padding-bottom: 1vw;
    width: 36vw;
    font-family: 'Concert One', cursive;
    text-align: center;
    /* margin-top: 4vw; */
    
}
.third-section
{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cards
{
    /* border: 2px solid red; */
    display: flex;
    margin: 7vw;
    margin-top: 1vw;
    width: 85.1vw;
}
.cards1, .cards2 , .cards3, .cards4
{
    /* border: 2px solid black; */
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 2.5vw;
    
}
.cards1
{

    background-color:rgb(164, 160, 167);
    
}
.cards2
{

    background-color:rgb(173, 173, 173);
    
}
.cards3
{

    background-color:rgb(164, 160, 167);
    
}
.cards4
{

    background-color:rgb(173, 173, 173);
    
}

.cards1:hover
{

    background-color:rgb(221, 182, 9);
    transition: 0.2s  ease-in-out;
    
}
.cards2:hover
{

    background-color:rgb(221, 182, 9);
    transition: 0.2s  ease-in-out;
    
}
.cards3:hover
{

    background-color:rgb(221, 182, 9);
    transition: 0.2s  ease-in-out;
    
}
.cards4:hover
{

    background-color:rgb(221, 182, 9);
    transition: 0.2s  ease-in-out;
    
}

.card-info-info 
{
    text-align: center;
    padding: 1.5vw;
    font-size: 1.2vw;
    font-family: 'PT Sans', sans-serif;
}

.card-info-heading
{
    padding:1vw;
    font-size: 1.9vw;
    font-family: 'Concert One', cursive;
}

.third-section img
{
    width: 21.3vw;
    height: 29.5vw;
}
.third-section button
{
    padding: 0.5vw;
    font-size: 1vw;
    font-family: 'Oxygen', sans-serif;
    border: none;
}
.third-section button:hover
{
    padding: 0.5vw;
    font-size: 1vw;
    font-family: 'Oxygen', sans-serif;
    background-color: rgb(78, 17, 102);
    color: rgb(255, 247, 247);
    border: none;
    cursor: pointer;
}
/* Fourth SECTION */
.pricing-head
{
    margin-top: 1vw;
    /* color: purple; */
    text-transform: capitalize;
    font-weight: bold;
    font-size: 1.2vw;
}
.pricing
{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.content
{
    display:flex;
    justify-content: center;
    align-items: center;
    margin-left: 13.5vw;
    margin-right: 13.5vw;
    text-align: center;
}

.content1, .content2, .content3
{
    padding-left: 6vw;
    padding-right: 6vw;
    /* padding-bottom: 100px; */
    margin-bottom: 7vw;
}
.content1
{
    border-right:3px solid rgba(0, 0, 0, 0.507);
}

.content2
{
    border-right:3px solid rgba(0, 0, 0, 0.507);
}

.head
{
    padding-bottom: 0.9vw;
}
.sub-head
{
    padding-bottom: 1vw;
    font-size: 0.8vw;
}
.pricing button
{
    background-color: rgb(47, 34, 109);
    color: white;
    padding: 0.2vw;
    padding-left: 2vw;
    padding-right: 2vw;
    border:none;
    border-radius: 1vw;
    cursor: pointer;

}
.pricing button:hover {
    background-color: rgb(214, 204, 64);
    color: rgb(0, 0, 0);
    padding: 0.2vw;
    padding-left: 2vw;
    padding-right: 2vw;
    border: none;
    border-radius: 1vw;
    cursor: pointer;
}

.content-content
{
    margin-bottom: 2vw;
    line-height: 2.2vw;
}

/* VEDIO PROJECTS */
.vedio
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #5b036f;
    color:white;
    height: 38vw;

}
.vedios
{
    display: flex;
    margin: 1vw;
}
.v1, .v2, .v3
{
    display: flex;
    flex-direction: column;
    padding: 1.5vw;
    position: relative;
}
.controls
{
    display:flex;
    flex-direction: row;
}
.title
{
    margin-right: 19.9vw;

}
.title, .time
{
    font-size: 1.2vw;
}
.absolute
{
    cursor: pointer;
    position: absolute;
    top: 8vw;
    left: 14vw;
}
.absolute img
{
    filter: invert(50%);
    width: 3vw;
}
.vedios button
{
    border:none;
}
.vedio .head
{
    margin-top: 3vw;
    font-size: 2.5vw;
    padding-bottom: 1vw;
}



/* ZIPPY TEAM */
.zippyteamheading
{
    font-size: 3vw;
    padding-bottom: 3vw;
    /* width: 36vw; */
    margin-top: 4vw;
    font-family: 'Concert One', cursive;
}
.zippyteam
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:relative;
}
.section
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.section1, .section2
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1.5vw;
}
.section2
{
    padding-top:1vw;
}
.card1, .card2, .card3
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.name, .information 
{
    text-align: center;
    /* padding-top: 0.7vw; */
    font-size: 1.5vw;
    font-family: 'Concert One', cursive;
}
.name
{
    padding-top:1.5vw;
}
.information
{
    opacity: 30%;
}
.section img 
{
    width: 16vw;
    height: 16vw;
    border-radius: 13vw;
}
.section1-card1, .section1-card2, .section1-card3
{
    padding-right: 6vw;
}
.section2-card1, .section2-card2, .section2-card3
{
    padding-right: 6vw;
}
.account img 
{
    width: 3vw;
    height: 3vw;
    margin: 0.3vw;
    opacity: 0;
    filter: invert(100%);
}
.accounthover1, .accounthover2, .accounthover3
{
    position:absolute;
}
.accounthover4, .accounthover5, .accounthover6
{
    position:absolute;
} 
/* .accounthover1
{
    position: absolute;
    top: 14.9vw;
    right: 69.5vw;
    opacity: 0;
}
.accounthover2
{
    position: absolute;
    top: 14.4vw;
    right: 47.2vw;
    opacity: 0;
}
.accounthover3
{
    position: absolute;
    top: 15vw;
    right: 25vw;
    opacity: 0;
}
.accounthover4
{
    position: absolute;
    top: 38.1vw;
    right: 69.6vw;
    opacity: 0;
}
.accounthover5
{
    position: absolute;
    top: 37.8vw;
    right: 47.1vw;
    opacity: 0;
}
.accounthover6
{
    position: absolute;
    top: 38vw;
    right: 25vw;
    opacity:0;
    
} */




.card1:hover,.card2:hover,.card3:hover
{
    background-image: url("https://i.ibb.co/WsFm9g3/puple.png");
    /* opacity:100%; */
    border-radius: 65%;
}

.card1:hover img,.card2:hover img,.card3:hover img
{
    opacity: 40%;
    /* border-radius: 65%; */
    transition: .2s ease;
}
.account img:hover
{
    opacity: 100%;
}

/*
.accounthover1:hover
{
    position: absolute;
    top: 14.9vw;
    right: 69.5vw;
    opacity:1;
    transition: .5s ease;
}
.accounthover4:hover
{
    position: absolute;
    top: 38.1vw;
    right: 69.6vw;
    opacity:1;
    transition: .5s ease;
}
*/


/*
.card2:hover
{
    background-image: url("/Images/puple.jpg");
    opacity:1;
    border-radius: 65%;
   
}

.card2:hover img
{
    opacity: 0.69;
    border-radius: 65%;
    transition: .5s ease;
}
.accounthover2:hover
{
    position: absolute;
    top: 14.4vw;
    right: 47.2vw;
    opacity: 0;
    opacity:1;
    transition: .5s ease;
}
.accounthover5:hover
{
    position: absolute;
    top: 37.8vw;
    right: 47.1vw;
    opacity:1;
    transition: .5s ease;
}





.card3:hover
{
    background-image: url("/Images/puple.jpg");
    opacity:1;
    border-radius: 65%;
   
}

.card3:hover img
{
    opacity: 0.69;
    border-radius: 65%;
    transition: .5s ease;
}
.accounthover3:hover
{
    position: absolute;
    top: 15vw;
    right: 25vw;
    opacity:1;
    transition: .5s ease;
}
.accounthover6:hover
{
    position: absolute;
    top: 38vw;
    right: 25vw;
    opacity:1;
    transition: .5s ease;
} */


/* LIFE IN ZIPPY */
.life_in_zippy_heading
{
    font-size: 3vw;
    padding-bottom: 1vw;
    /* width: 36vw; */
    /* margin-top: 5vw; */
    /* border: 2px solid red;*/
    font-family: 'Concert One', cursive;
}
.lifeinzippy
{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 65vw;
    background-color: rgba(197, 189, 189, 0.822);
}
.show
{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.slideshow
{
    display:flex;
    justify-content: center;
    align-items: center;
}
.slideshow img
{
    width: 9.4vw;
}
.show_big
{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 1vw;
}
.show_big img
{
    width:55vw;
}
#pre 
{
    width: 3.2vw;
    padding: 1.6vw 0px;
    background-color: black;
    margin-right: 1vw;

}
#nex
{
    width: 3.2vw;
    padding: 1.6vw 0px;
    background-color: black;
    margin-left: 1vw;
 
}

#pre:hover
{
    width: 3.2vw;
    padding: 1.6vw 0px;
    background-color: rgba(54, 18, 214, 0.856);
    margin-right: 1vw;
    transition: .5s ease;
}

#nex:hover
{
    width: 3.2vw;
    padding: 1.6vw 0px;
    background-color: rgba(54, 18, 214, 0.856);
    margin-left: 1vw;
    transition: .5s ease;
}
/* NEWS LETTER SIGNUP  */
.newsletter {
    position:relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 27vw;
}

.news_letter_heading {
    position: absolute;
    font-size: 5vw;
    margin-top: 3vw;
    /* padding-bottom: 3vw; */
    top: 0;
    font-weight: bold;
}
.newsletter .form
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2vw;

}
#signup
{
    font-size: 1.8vw;
    height: 3.8vw;
    width: 47vw;
    opacity: 0.8;
    margin-top: 2vw;
}
.btn
{
    height: 3.8vw;
    width: 7vw;
    opacity: 0.8;
    background-color: #5822aff7;
    color: white;
    margin-top: 2vw;
    font-size: 1.3vw;
    border:none;
    cursor: pointer;

}
.btn:hover
{
    height: 3.8vw;
    width: 7vw;
    opacity: 0.8;
    background-color: #f0c349ea;
    color: rgb(0, 0, 0);
    transition: .5s ease;
    cursor: pointer;

}

/* BLOG */
.blogheading 
{
    font-size: 4vw;
    margin-top: 4vw;
    /* padding-bottom: 3vw; */
}
.blog
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
}
.blogs 
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 4vw;
}

.blog1, .blog2, .blog3 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1vw;
}
.blog-info {
    text-align: center;
    padding-bottom: 1vw;
    width: 21vw;
    font-size: 1vw;
}

.blog img 
{
    width: 25vw;
}

.blog-topic 
{
    padding-top: 1vw;
    width: 11vw;
    text-align: center;
    font-size: 1vw;
}

.blog-date {
    padding: 1vw;
    opacity: 0.5;
    font-size: 0.9vw;
}

.readmore {
    width: 10vw;
    height: 3vw;
    background-color: #d1cbcbbf;
    cursor: pointer;
    font-size: 1vw;
    border: none;
}
.readmore:hover {
    width: 10vw;
    height: 3vw;
    background-color: #6d31db;
    cursor: pointer;
    font-size: 1vw;
    border: none;
    color: rgb(247, 247, 247);
}
/* CONTACT \ MAP  */
.contact_heading {
    padding-left: 4vw;
    font-size: 2vw;
    font-weight: bold;
    padding-top: 3vw;
}
.contact_map {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 6vw;
    /* background-color: rgba(226, 226, 0, 0.822); */
}
iframe {
    width: 51.9vw;
    height: 40.3vw;
    margin-bottom: 0.3vw;
}
.contact {
    width: 47vw;
    font-size: 1.1vw;
    background-color: rgb(223 220 21);
    /* height: 39.1vw; */
    margin: 21px 0px;
    height: 40.3vw;
    margin-top: 0.6vw;
}
.form1 button
{
    width: 19.6vw;
    border: none;
    /* background-color: rgb(199, 201, 238); */
    box-shadow: 1px 1px black;
    cursor: pointer;
    /* border-radius: 0.3vw; */
    margin-top: 0.6vw;
    background-color: rgb(50, 7, 119);
    color:white
}
.form1 {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    padding-left: 4.2vw;
}
.form1 input, .form1 textarea {
    border: none;
    box-shadow: 1px 1px black;
    /* border-radius: 0.3vw; */
    width: 19.4vw;
}
.form1 textarea
{
    width:19.5vw;
}
.form1 label {
    font-size: 1vw;
}
/* FOOTER */

.footer
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 8vw;
}
.address {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    width: 15vw;
    align-items: center;
    padding-right: 1vw;
    height: 11vw;
}
.followers
{
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    margin: 0px 17vw;
}
.f1, .f2
{
    display:flex;
    justify-content: center;
    align-items: center;
}
.contactus
{
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    width: 14vw;
    text-align: center;
    height: 11vw;
}
.location {
    text-align: center;
    padding-top: 1vw;
    line-height: 2vw;
}
.contacts {
    text-align: center;
    padding-top: 1vw;
    line-height: 2vw;
}
.followers img
{
    width: 5vw;
    padding: 14px;
}
.address-heading, .followers-heading, .contact-heading
{
    font-size: 1.4vw;
    font-weight: bolder;
}