@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&family=Cinzel:wght@400..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
body{
    background-color: #f8e8d58e;
    font-family: "Baloo Bhai 2", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    word-spacing: 1vh;
}
@media(min-width:1200px){
    body p{
        padding-left: 20vh;
        padding-right: 20vh;
    }
    .home .container p{
        padding: 2vh 35vh 5vh 35vh;
     }
}
body h1{
    font-family: "Cinzel", serif;
    font-weight: 700;
    padding-top: 20vh;
    font-size: 8vh;
    color: goldenrod;
}
body h2{
    font-family: "Libre Baskerville", serif;
    color: goldenrod;
}
.home{
    background:rgba(0, 0, 0, 0.7) url(images/background.jpg);
    background-size: cover;
    background-blend-mode: darken;
    color: white;
    height: 100vh;
    position: relative;
    text-align: center;
    background-attachment: fixed;
 }
 .home .container h4{
    font-family: "Libre Baskerville", serif;
    padding-top: 5vh;
    font-size: 4vh;
 }

 .home .container a{
    display: inline;
    padding: 2vh 5vh 2vh 5vh;
    justify-content: center;
 }
 .wp{
    background-color: green;
    border-radius: 2vh;
 }
 .wp:hover{
    background-color: rgba(0, 128, 0, 0.845);
 }
 .mail{
    background-color: gray;
    border-radius: 2vh;
    padding: 3vh;
 }
 .mail:hover{
    background-color: rgba(128, 128, 128, 0.845);
 }
 @media(max-width:1200px){
    .home{
        display: flex;
        background-position: center;
     }
     .home .container #h1{
        font-family: "Libre Baskerville", serif;
        padding-top: 20vh;
        font-size: 4vh;
     }
     .home .container h4{
        font-family: "Libre Baskerville", serif;
        padding-top: 3vh;
        font-size: 2vh;
        padding: 2vh 3vh 2vh 3vh;
     }
     .home #p{
        padding: 0 3vh 3vh 3vh;
     }
    
 }
 @media(max-width:400px){
    .home #a{
        padding: 2vh;
     }
 }
 @media(max-width:300px){
    .home #a{
        padding: 1vh;
     }
     .home .container #h1{
        padding-top: 5vh;
     }
 }
.navbar img{
    mix-blend-mode: multiply;
    height: 5vh;
}
/* .upper-bar{
    background-color: #cdb4db; 
    height: 5vh;
    font-size: 2vh;
    position: relative;
} */

@keyframes appear{
    from{
        margin-top: 0;
    }
    to{
        /* opacity: 1; */
        margin-top: -5vh;
    }
}
@keyframes disappear{
    from{
        margin-top: -5vh;
    }
    to{
        /* opacity: 1; */
        margin-top: 0;
    }
}
.navbar{
    z-index: 3;
    position: fixed;
}

/* nav .btn{
    background-color: #3D52A0;
    color: white;
}
nav .btn:hover{
    background-color: #ADBBDA;
    color: white;
}
 */

.upper-bar .logo{
    color: white;
    text-decoration: none;
    font-size: 3vh;

}
.upper-bar a{
    color: white;
}
.upper-bar a:active{
    text-decoration: none;
}

.lower-bar{
    width: 100%;
}

/* .carousel-item {
	min-height: 300px;
}

.carousel img{
    display: absolute;
    height: 100%;
}
.carousel-caption {
	bottom: 220px;
	z-index: 2;
}
.carousel-caption h5 {
    text-align: center;
	font-size: 10vh;
	text-transform: uppercase;
}
.carousel-caption p {
	width: 60%;
	margin: auto;
	font-size: 4vh;
} */

@media (max-width: 900px){
    /* .carousel-caption h5 {
        font-size: 7vh;
        align-items: center;
    }
    .carousel-caption p {
        width: 60%;
        margin: auto;
        font-size: 2vh;
    } */
    .navbar .logo{
        font-size: 2vh;
    }
    .upper-bar{
        height: 5vh;
        font-size: 1.5vh;
    }

}
@media (max-width: 485px){
    .navbar .logo{
        display: none;
    }
}
/* .carousel-inner:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
} */

/* Contact Form */
#contact input, #contact textarea {
    border-radius: 0;
}

/* Footer */
footer {
    font-size: 0.9rem;
}
footer a{
    text-decoration: none;
    color: white;
}

/* animation */
.reveal{
    position: relative;
    transform: translateY(100px);
    opacity: 0;
    transition: all 1s ease;
}

.reveal.active{
    transform: translateY(0px);
    opacity: 1;
}

/* floating wp */
.floating-wp img{
    position: fixed; 
    bottom: 5vh;
    left: 5vh;
    z-index: 4;
    height: 10vh;
}
.floating-wp img:hover{
    transition: .3s linear;
    opacity: .5;
}
@media(max-width: 1200px){
    .floating-wp img{
        height: 5vh;
    }
}

/* products */

.service{
    margin-top: 8vh;
    width: 40vh;
    height: 30vh;
    border-radius: 1vh;
    margin-bottom: 2vh;
    box-shadow: 0vh 0vh 2vh 0vh rgb(180, 174, 174);
}
@media(max-width:435){
    .service{
        width: 30vh;
        height: 30vh;
    }
}
#products{
    background-color: rgb(241, 241, 241)
}

/* global sales */

.count{
    background-color: white;
    background: white;
    text-align: center;
    padding: 2vh 0 2vh 0;
}
/* .left{
   text-align: center;
}
.left h5{
    padding-top: 10vh;
} */


/* .box1{
    left: 3%;
    position: absolute;
    height: 40vh;
    width: 40vh;
    background-color: #e6e2ed;
    box-shadow: 0vh 0vh 2vh 0vh rgb(199, 194, 194);
    border-radius: 2vh;
}

.box2{
    top: 325%;
    left: 25%;
    position: absolute;
    height: 40vh;
    width: 40vh;
    background-color: #e6e2ed;
    box-shadow: 0vh 0vh 2vh 0vh rgb(199, 194, 194);
    border-radius: 2vh;
}

.box3{
    top: 347vh;
    left: 5vh;
    position: absolute;
    height: 40vh;
    width: 40vh;
    background-color: #e6e2ed;
    box-shadow: 0vh 0vh 2vh 0vh rgb(199, 194, 194);
    border-radius: 2vh;
} */

@media(max-width: 1200px){
    /* .box1{
        display: none;
    }
    
    .box2{
        display: none;
    }
    
    .box3{
       display: none;
    } */
    .counter h5 p{
        font-size: 2vh;
    }
    .world-map img{
        width: 100%;
        height: 100%;
        left: 1vh;
    }
}

.world-map{
    /* margin-left:100vh; */
    margin: 2vh 0 2vh 0;
    width: 40%;
    left: 30%;
    /* max-width: 180vh; */
    position: relative;
}

.world-map img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.title{
    text-align: center;
    color: #000;
    margin: 2em 0;
    padding: 0 1em;
}

.title p{
    max-width: 70%;
    margin: 1em auto;
    line-height: 3vh;
}

/* products */
.product-1{
    margin-top: 8vh;
    width: 50vh;
    height: 50vh;
    border-radius: 2vh;
    margin-bottom: 2vh;
    box-shadow: 0vh 0vh 2vh 0vh rgb(199, 194, 194);
}

@media(max-width: 1200px){
    .product-1{
        width: 20vh;
        height: 20vh;

    }
    .service{
        width: 30vh;
        height: 20vh;
    }
}