@import url('../css2.css');

html,body{margin: 0;padding: 0; font-family: "Kumbh Sans";}
:root{
    --yellow:#FABE00;
    --blue:#00A0DA;
    --red:#E60012;
    --para:#474747;
}
img{max-width: 100%;}
a{text-decoration: none;}

header .navbar{background-color: rgba(255, 255, 255, 0.527); position: fixed; top: 0; z-index: 5; width: 100%;}
header a.navbar-brand img{width: 100%; max-width: 200px;}
header .nav-item{margin-right: 1.5rem;}
header .nav-item:last-child{margin-right: 0;}
header .nav-link{font-weight: 600; color: black;}
header .nav-link:hover,
header .nav-link.active{color: var(--red) !important;}

header ul.dropdown-menu{opacity: 0; transform: translateY(50%); transition: .5s ease; display: block;visibility: hidden;}
header li.dropdown:hover ul.dropdown-menu{transform: translateY(0);opacity: 1; visibility: visible;}
header ul.dropdown-menu li a:hover, header ul.dropdown-menu li a:focus{background-color: var(--red); color: white;}
.navbar-toggler{border: none !important;}
.navbar-toggler:focus{box-shadow: none;}
.navbar .toggle_icon{width: 100%;max-width: 30px;height: 3px;background-color: black;min-width: 30px;}
.navbar .toggle_icon:nth-child(2n){margin: .3rem 0;}
/* header ul.dropdown-menu:hover{transform: inherit; opacity: inherit;} */


/* slider */
.slider{position: relative; overflow: hidden;}
.slider,
.slider img{height: 100vh; object-fit: cover;}
.slider::before, .slider::after{position: absolute; background-color: var(--red); width: 100%; max-width: 300px; height: 300px; content: ""; border-radius: 50%; left: -8%; top: 15%; filter: blur(3px); z-index: 1;}
.slider::after{right: -8%; bottom: 15%; top: inherit; left: inherit;}
.slider .carousel-caption{text-align: left; top: 50%; transform: translateY(-50%);}
.slider .carousel-caption p{font-size: 18px; color: white;}
.slider .carousel-caption .slider-title{font-size: 55px; color: white; font-weight: 700; margin: 1.5rem 0;}
.slider .carousel-caption a{padding: .7rem 2rem;}
 label{font-size: 12px; color: #474747;}
 label sup{color: var(--red);}
 input,  textarea{border-radius: 5px;font-size: 12px; padding: .5rem 1rem; color: #474747; border: solid 1px var(--blue);}
 input:focus,  textarea:focus{outline: none; border-color: var(--red);}
 form a{padding: .5rem 1rem !important;}
.slider .arrows{display: none; bottom: 0; width: 100%; max-width: 150px; position: absolute; bottom: 8%;left: 8%; height: 100px; z-index: 2;}
.slider .arrows .carousel-control-prev, .slider .arrows .carousel-control-next{width: 100%; max-width: 50px; height: 50px; border-radius: 50px; background-color: white; opacity: 1; color: black; transition: .5s ease;}
.slider .arrows .carousel-control-prev:hover, 
.slider .arrows .carousel-control-prev.active, .slider .arrows .carousel-control-next:hover, .slider .arrows .carousel-control-next.active{background-color: var(--red); fill: white;}

/* about */
.about img, .about .img_box{position: relative; width: 100%; max-height: 500px; object-fit: cover; max-width: 400px;}
.about .img_box::before{position:absolute; width: 100%; height: 100%; background-color: var(--blue); content: ""; max-width:100%; z-index: -1; animation: rotate 5s ease infinite; top: -10px; bottom: 0;}

/* services */
.services .design_text::before{left: inherit;}
.scard{position: relative; border-radius: 12px; box-shadow: 2px 2px 20px 1px lightgray; padding: 2rem; text-align: center; transition: .5s ease; color: inherit; text-decoration: none;}
.scard .sicon {position: absolute;top: -15%;transform: translateY(22%);width: 100%;max-width: 90px;height: 90px;border-radius: 50%;background-color: white;display: flex;justify-content: center;align-items: center;margin: auto;left: 0;right: 0;box-shadow: 2px 2px 20px 1px lightgray; transition: .5s ease;}
.scard .text{margin: 3rem 0;}
.scard .icon{width: 100%; max-width: 40px; height: 40px; border-radius: 50%; background-color: white; box-shadow: 2px 2px 20px 1px lightgray; display: flex; justify-content: center; align-items: center; margin: auto; transition: .5s ease;}
.scard:hover{background-color: var(--red); color: white; box-shadow: none;}
.scard:hover .sicon, .scard:hover .icon{background-color: var(--blue); color: white; box-shadow: none;}
.scard h5, .scard p{transition: .5s ease;}
.scard:hover p{color: white;}
.services .prof img{max-width: 60px; height: 60px; border-radius: 50%; object-fit: cover; padding: 3px; border: solid 2px var(--blue);}


.blog .blog_img{position: relative; width: 100%; max-width: 100%; height: 220px; overflow: hidden;}
.blog aside {position: sticky; top: 10%;}
.blog .blog_img_banner{position: relative; width: 100%; max-width: 100%; height: 350px; overflow: hidden;}
.blog .blog_img img{transform: scale(1); transition: .5s ease; width: 100%; max-width: 100%; height: 220px;}
.blog .blog_img:hover img{transform: scale(1.1);}
.blog .admin_info{margin-top: 1rem;}
.blog .admin_info img{border-radius: 50%; width: 100%; max-width: 50px; height: 50px; object-fit: cover; padding: 3px; border: solid 1px var(--red);}
.blog .badge_red{position: absolute; top: 5%; left: 5%;}


.our_service .img_box{height: 350px; overflow: hidden; position: relative;}
.our_service .img_box img{height: 350px; object-fit: cover;}
.our_service .ovly_box{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--red); display: flex;justify-content: end;padding: 0 1rem 1rem; flex-direction: column; opacity: 0; transition: .5s ease; visibility: hidden; color: white;}
.our_service .img_box:hover .ovly_box{opacity: 1; visibility: visible;}
.our_service .ovly_box button{border: none;}
.our_service .ovly_box button:hover{background-color: rgb(255, 255, 255); color:var(--red);}
.our_service .img_box h4{position: absolute; bottom:0; top: 0; display: flex; justify-content:center; align-items: end; background:linear-gradient(transparent, #e6001294); color: white; font-size: 20px; font-weight: 600; left: 0; right: 0; padding-bottom: 1rem; text-align: center;}



.footer{ padding: 3rem 0 0; background-color: lightblue; background-size:cover; background-repeat: no-repeat;}
footer a.navbar-brand img{width: 100%; max-width: 250px;}
footer  ul li a {font-size: 12px; transition: .5s ease;}
footer  ul li a:hover{text-decoration: underline !important; color: var(--red) !important;}



/* service */
.banner .banner_bg{position: relative; border-radius: 15px; background-image: url(../images/blog.jpg); height: 300px; position: relative; display: flex; align-items: end;background-size: cover;background-repeat: no-repeat;}
.banner .banner_bg::before{background-color: black; position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; border-radius: 15px; opacity: .5;}
.banner .breadcrumb {position: relative; margin: 0 0 3rem 1rem;}
.banner .breadcrumb li a, .banner .breadcrumb li{color:white; text-decoration: none;}
.banner .breadcrumb li:hover a, .banner .breadcrumb li.active{color: var(--red);}



/* gallery */
.gallery .gallery_box{position: relative; overflow: hidden; border-radius: 0.375rem; width: 100%; max-width: 100%; height: 250px;}
.gallery .gallery_box img{border-radius: 0.375rem; width: 100%; max-width: 100%; height: 250px; object-fit: cover; transition: .5s ease;}
.gallery .gallery_box img:hover{transform: scale(1.1);}


.services .step_img img{height: 300px; width: 100%; max-width: 100%; object-fit: cover; border-radius: 15px;}
.faq .accordion button {border: none;box-shadow: none;}
.faq .accordion-button:not(.collapsed){background-color: lightblue;}