@import url(bootstrap.min.css);
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

body{font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 1px; color: #212121;}
h1, h2, h3, h4, h5, h6{font-family: "Roboto Condensed", sans-serif;}
.btn-primary{font-family: "Roboto Condensed", sans-serif; font-size: 16px; text-transform: uppercase; font-weight: 700; padding:0.532rem 1.75rem !important; background-color: #25c1e0; border-radius: 6px; color: #ffffff; border: none;}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, :not(.btn-check)+.btn:active,
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active{ background-color: #ffb515;}

/*#parallelogram { width: 33%; height: 100px; margin: 0 0 0 -20px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: #ffca00; overflow:hidden; position:absolute; z-index: 0;}
.skewbg{ top:-30px; left:-30px; right:-30px; bottom:-30px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);}*/
.navbar{ width: 100%; height: 100px; position: sticky; z-index: 99; top: 0;}
.navbar .container{ z-index: 1;}
.navbar-brand{ width: 100%; max-width: 260px;}
.navbar .nav-item{ margin: 0 3px;}
.navbar .nav-item .nav-link{font-family: "Roboto Condensed", sans-serif; font-size: 18px; text-transform: uppercase; font-weight: 700; color: #787878; padding:0.532rem 1.5rem !important; border-radius: 6px;}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show{background-color: #25c1e0; color: #ffffff;}
.navbar-nav .nav-link:focus-visible{ box-shadow: none;}
.language{font-family: "Roboto Condensed", sans-serif; font-size: 16px; color: #787878; font-weight: 400;}
.language ul{ margin: 0; padding: 0;}
.language ul li{ margin: 0; padding: 0; list-style: none; display: inline-block; position: relative;}
.language ul li::after{ content: "|"; font-family: "Roboto Condensed", sans-serif; font-size: 16px; color: #787878; font-weight: 400; display: inline-block; margin-left: 8px;}
.language ul li:last-child::after{ display: none;}
.language ul li img{ display: none;}
.language a{font-family: "Roboto Condensed", sans-serif; font-size: 16px; color: #787878; font-weight: 400; margin: 0px; text-decoration: none;}
.language a:hover, .language li.current-lang a{ color: #25c1e0;}

.heroslider{ padding-top:0px; padding-bottom: 0px;}
.heroslider .carousel-caption{ width: 100%; max-width:650px; bottom: auto; top:35%; left: 50%; transform: translate(-50%, -50%);}
.heroslider .carousel-caption h1{ font-size: 50px; text-transform: uppercase; font-weight: 700; color: #212121;}
.heroslider .carousel-caption p{font-family: "Roboto Condensed", sans-serif; font-size: 22px; font-weight: 400; color: #212121;}
.heroslider .carousel-control-next, .heroslider .carousel-control-prev{ opacity: 1; width: 10%;}
.heroslider .carousel-control-next-icon, .heroslider .carousel-control-prev-icon{width: 3.5rem; height: 3.5rem;}
.heroslider .carousel-item img{transform: scale(1); transition: opacity .6s ease;}
.heroslider .carousel-item.active img {animation: grow 6s linear forwards;}
@-webkit-keyframes grow { 0%, 20% {transform: scale(1);} 75%, 100% {transform: scale(1.15);}}
@keyframes grow { 0%, 20% {transform: scale(1);} 75%, 100% {transform: scale(1.15);} }
.heroslider .carousel-indicators [data-bs-target]{ width: 12px; height: 12px; border-radius: 15px; background-color: #25c1e0; border: 0; margin: 0px 5px;}
.heroslider .carousel-indicators [data-bs-target]:hover{ opacity: 1;}

.section_head h2{font-family: "Roboto Condensed", sans-serif; font-size:20px; color: #ef1456; font-weight: 400; margin-bottom: 1.5rem;}
.section_head h2 img{ margin: 0 15px;}
.section_head h1{font-family: "Roboto Condensed", sans-serif; font-size:55px; color: #212121; font-weight: 400; margin-bottom: 1.5rem;}

section{ padding:150px 0;}
.the_company .read_more {overflow: hidden;}
.the_company .btn-link{ padding-left: 0; padding-right: 0; color: #25c1e0;}
.the_company .about_right{ display: flex; justify-content:flex-end; flex-wrap: wrap;}
.the_company .box-main{ width: 290px; margin:0px 10px 20px 10px; text-align: center; font-family: "Roboto Condensed", sans-serif; font-size:18px; color: #ffffff; font-weight: 700; line-height: 20px; transition: all .5s;}
.the_company .box-main:hover{transform : translateY(-10px);}
.the_company .box-main img{ max-width: 100%; border-radius: 6px;}
.the_company .box_top{ margin-top:60px; width: 220px; height: 220px; border-radius: 6px; -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2); background-color: #ef1456; display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; align-content: center; transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);}
.the_company .box_top img{ width: auto; height: auto; margin-bottom: 20px;}
.the_company span{ width: 100%;}
.the_company .thumb-end{ order: 4; margin-top: -70px;}
.the_company .box_bot{ margin-left:70px; width: 220px; height: 220px; border-radius: 6px; -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2); background-color: #57b948; display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; align-content: center;}
.the_company .box_bot h1{ font-size: 80px; font-weight: 700; color: #ffffff;}

.our_products{ background-color: #f4f4f4;}
.our_products .section_head{ text-align: center;}
.our_products .detail_box{background-color: #ffffff; padding:25px 25px 0px 25px; position: relative;}
.our_products img{ max-width: 100%; -webkit-transition:-webkit-transform 0.35s; transition:transform 0.35s; -webkit-transform: translate3d(0,0,300px); transform: translate3d(0,0,200px);}
.our_products .detail_box h2{ font-size: 22px; color: #212121; font-weight: 700; position: relative; padding-left:15px; line-height: 22px; margin-bottom: 1rem;}
.our_products .detail_box h2::before{ content: ""; width: 3px; height: 20px;; position: absolute; left: 0; background-color: #787878;}
.our_products .detail_box .short_desc{ font-size:15px; color: #212121; font-weight: 400; text-align: justify; line-height: 24px; height:170px; overflow: hidden;}
.our_products .detail_box .btn-primary{ width: 46px; height: 46px; border-radius: 0; padding:0px !important; font-size: 30px; font-weight:300; font-family: "Poppins", sans-serif; color: #ffffff; line-height: 46px; text-align: center; position: absolute; bottom: 0; left: 25px;}

.our_products .product_box{ width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.our_products .product_thumb{ width: 50%; -webkit-perspective: 1000px; perspective: 1000px; overflow: hidden;}
.our_products .product_box:hover .product_thumb img{ -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.our_products .detail_box{width: 50%; background-color: #ffffff; padding:25px 25px 0px 25px;}
.our_products .odd .product_box .product_thumb{ order: 1;}
.our_products .product_box:hover .btn-primary{background-color: #ffca00;}

.whychoose { background: url("../images/whychoose_bg.webp") no-repeat center bottom; padding-top: 50px; padding-bottom: 315px; position: relative; background-attachment: fixed;}
.whychoose .object{ width: auto; height: auto; position: absolute; left: 0; top: 0;}
.whychoose .section_head{ text-align: center;}
.whychoose .icon_box{ width:100%; height:100%; display: flex; justify-content: space-between; align-content: center; flex-wrap: wrap; text-align: center; background: url("../images/box_bg.webp") no-repeat center center; padding:70px 0px; animation-duration: 2s; animation-iteration-count: infinite; transform-origin: bottom; background-size: 100% 100%;}
.whychoose .icon_box:hover{animation-name: bounce; animation-timing-function: ease-in-out;}
@keyframes bounce { 0%   { transform: translateY(0); } 50%  { transform: translateY(-20px); } 100% { transform: translateY(0); } }
.whychoose .icon_box .icon{ width: 100%; text-align: center; margin-bottom:1rem;}
.whychoose .icon_box h3{ width: 100%; font-size: 25px; font-weight: 700; color: #212121; text-transform: uppercase; padding: 0px 50px;}
.whychoose .passion_box{ max-width:470px; background-color: #25c1e0; font-family: "Roboto Condensed", sans-serif; font-size:40px; color: #ffffff; font-weight: 400; line-height:100px; border-radius: 6px; text-align: center;}
.whychoose .passion_box:hover{background-color: #ffca00;}

.contact_us{ padding-bottom: 0; position: relative;}
.contact_us .object3{ width: auto; height: auto; position: absolute; left: 0; top: 0;}
.contact_us .contact_wrapper{ background-color: #f4f4f4; padding: 100px; border-radius: 6px; position: relative;}
.contact_us .contact_wrapper .object2{ width: auto; height: auto; position: absolute; right:-315px; bottom:100px;}
.contact_us .form-control{ background-color: #ffffff; border-color: #d2d2d2; padding: .70rem .75rem; font-size: 15px; color: #212121;}
.contact_us .contact_wrapper textarea{ height: 120px; resize: none;}
.contact_us .contact_wrapper .btn-primary{ padding:0 2.062rem !important; line-height: 44px;}

footer { background-color: #212121; padding: 180px 0px  0px  0px; margin-top: -100px;}
footer h4{ font-size: 18px; font-weight: 700; color: #ffffff; text-transform: uppercase; margin-bottom: 1rem;}
footer ul{ margin: 0; padding: 0; font-size: 16px; font-weight: 400; text-decoration: none; color:#ffffff;}
footer ul li{ width: 100%; margin:0px 0px 10px 0px; padding: 0; list-style: none;}
footer ul li a{ font-size: 16px; font-weight:300; text-decoration: none; color:#ffffff;}
footer ul li a:hover{color: #ffca00;}
footer .expand_blk{ font-size: 18px; font-weight: 700; color: #ffffff; text-transform: uppercase; margin-bottom: 1rem; display:inline-block; position: relative; padding-right:0px;}
footer .expand_blk::after{ content: ""; width: 12px; height: 7px; background: url("../images/downarrow.webp") no-repeat left 0; position: absolute; right: 0; top: 10px; display: none;}
footer .card-body{ padding: 0px 0px 1rem 0px; background: transparent; border: 0; font-size: 16px; font-weight: 400; color:#ffffff;}
footer .copyright {font-size: 14px; font-weight: 400; text-decoration: none; color:#ffffff; text-align: center; margin-top: 2rem;}
footer .copyright span{ margin-left: 15px;}
footer .copyright a{font-size: 14px; font-weight: 400; text-decoration: none; color:#ffffff; text-align: center; margin: 0px 15px; display: inline-block;}
footer .copyright a:hover{color: #ffca00;}
footer .copyright .bdr{ border-top: 1px solid #787878;}

#backtotop{ position: fixed; right: 20px; bottom: 20px; transition: opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000; cursor: pointer;}
#backtotop.show { opacity: 1; visibility: visible;}

.inner_head{padding:95px 0px; background-position: center bottom; background-repeat: no-repeat; background-color: #0ab2d4; background-size: 100% auto;}
.inner_head h1{ font-size: 50px; color: #ffffff; font-weight: 700; text-transform: uppercase;}
.inner_head .breadcrumb{ justify-content: center; font-size: 18px; font-weight: 400;}
.inner_head .breadcrumb-item+.breadcrumb-item::before{content: var(--bs-breadcrumb-divider, "|");}
.breadcrumb-item+.breadcrumb-item::before{color: #ffffff;}
.inner_head .breadcrumb-item, .inner_head .breadcrumb-item a{ color: #ffffff; text-decoration: none; font-family: "Roboto Condensed", sans-serif;}
.inner_head .breadcrumb-item a:hover{color: #ffca00;}
.inner_head .breadcrumb-item.active{ color: #212121;}

.product_detail{position: relative;}
.product_detail .product_thumb{ max-width:450px; float: right; margin:0px 0px 20px 20px;}
.product_detail .product_thumb img{ width: 100%; border-radius: 6px;}
.product_detail .sidebar ul{ margin: 0; padding: 0;}
.product_detail .sidebar ul li{ margin:0px; padding:15px 10px; list-style: none; border-left: 5px solid transparent; border-bottom: 1px solid #25c1e0;}
.product_detail .sidebar ul li:first-child{ margin-top: 0;}
.product_detail .sidebar ul li a{font-family: "Roboto Condensed", sans-serif; font-size: 20px; color: #212121; font-weight: 400; text-decoration: none; display: block;}
.product_detail .sidebar ul li:hover, .product_detail .sidebar ul li.active{ background: rgba(37,193,224,0.2); border-left: 5px solid #25c1e0;}
.product_detail .sidebar ul li:hover a, .product_detail .sidebar ul li.active a{ color: #25c1e0;}
.product_detail .content_area h1{font-family: "Roboto Condensed", sans-serif; font-size:40px; color: #212121; font-weight: 400; margin-bottom: 1rem;}
.product_detail .content_area h2{font-family: "Roboto Condensed", sans-serif; font-size:20px; color: #ef1456; font-weight: 400; margin-bottom: 1rem;}
.product_detail .content_area h3{font-family: "Roboto Condensed", sans-serif; font-size:25px; color: #ef1456; font-weight: 400; margin-bottom: 1rem;}
.product_detail .content_area p{font-size:16px; color: #212121; font-weight: 400; margin-bottom: 1rem; line-height: 26px; text-align: justify;}
.product_detail .content_area ul{ margin: 0; padding: 0;}
.product_detail .content_area ul li{ margin:0px 0px 10px 0px; padding:0px 15px; list-style: none; font-size:16px; color: #212121; font-weight: 400; background: url("../images/list_arrow.webp") no-repeat left 7px;}

.impressa-popup h4{ font-size: 18px; font-weight: 700; color: #212121; text-transform: uppercase; margin-bottom: 1rem;}
.impressa-popup ul{ margin: 0; padding: 0; font-size: 15px; font-weight: 400; text-decoration: none; color:#212121;}
.impressa-popup ul li{ width: 100%; margin:0px 0px 10px 0px; padding: 0; list-style: none;}
.impressa-popup ul li a{ font-size: 16px; font-weight:300; text-decoration: underline; color:#212121;}
.impressa-popup ul li a:hover{color: #ffca00;}
.impressa-popup strong{ font-weight: 600;}
.impressa-popup p{font-size: 15px; font-weight: 400; color:#212121;}

.whychoose-banner {width: 100%; display: block; padding: 0px;}
.whychoose-banner img{ width: 100%; display: block;}


@media (max-width:1400px){
    .navbar .nav-item .nav-link{ padding: 0.532rem 1rem !important;}
    .heroslider .carousel-caption{top:40%; transform: translate(-50%, -40%);}
    .the_company .box-main{ width: 250px;}
    .the_company .box_top{ margin-top: 30px;}
    .the_company .thumb-end{margin-top:-50px;}
    .the_company .box_bot{ margin-left: 30px;}
    .our_products .detail_box{ padding: 15px 15px 0px 15px;}
    .our_products .detail_box h2{font-size: 20px; padding-left: 10px; line-height: 20px; margin-bottom:0.5rem; letter-spacing: 0.5px;}
    .our_products .detail_box .short_desc{line-height: 22px; height:158px; overflow: hidden;}
    .our_products .detail_box .btn-primary{ left: 15px;}
    .whychoose .icon_box{ padding:62px 0px;}
    .whychoose .icon_box .icon img{ width: 80px;}
    .whychoose .icon_box h3{ font-size: 22px;}
    .contact_us .contact_wrapper{padding: 80px;}
    .whychoose .object img{ width: 200px; height: auto;}
    .contact_us .contact_wrapper .object2{ right:-280px;}
    .contact_us .contact_wrapper .object2 img{ width: 280px; height: auto;}
    footer .expand_blk, footer h4{ font-size: 16px;}
}

@media (max-width:1300px){
    .whychoose .object img{ width:160px;}
    .contact_us .contact_wrapper .object2{ right:-200px;}
    .contact_us .contact_wrapper .object2 img{ width: 200px;}
    .heroslider .carousel-caption h1{ font-size: 40px;}
    .section_head h1{ font-size:45px;}
}
@media (max-width:1199px){
    .navbar-brand img{ max-width: 100%;}
    .navbar .nav-item .nav-link{ padding: 0.532rem !important; font-size: 16px;}
    .the_company .box-main{ width: 200px;}
    .the_company .box_top{ margin-top: 0px; width: 180px; height: 180px;}
    .the_company .thumb-end{margin-top:-60px;}
    .the_company .box_bot{ margin-left: 20px; width: 180px; height: 180px;}
    .our_products .detail_box .short_desc{ height: 135px;}
    .our_products .detail_box .btn-primary{ width: 38px; height: 38px; line-height: 38px; font-size: 25px;}

    .whychoose .icon_box{ padding: 50px 0px;}
    .whychoose .icon_box .icon img{ width: 60px;}
    .whychoose .icon_box h3{ padding: 0px 30px; font-size: 20px;}
    .whychoose .passion_box{ line-height: 80px; font-size: 38px;}
    .contact_us .contact_wrapper{ padding: 60px;}

    footer img{ max-width: 100%;}
    footer ul li strong{ display: block;}

    .product_detail .product_thumb{max-width: 350px;}
}

@media (max-width:992px){
    .navbar-expand-lg .row{ position: relative;}
    .navbar-expand-lg .navbar-collapse{ width: 100%; position: absolute; left: 0; top:85px; background-color: #ffffff;}
    .navbar-expand-lg .navbar-toggler{ border-color: #212121;}
    .navbar-expand-lg .navbar-toggler:focus{ box-shadow: none;}
    .navbar-expand-lg .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 33, 33, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}

    .heroslider .carousel-caption{ top: 50%; transform: translate(-50%, -50%);}
    .heroslider .carousel-caption h1{ font-size: 34px;}
    .heroslider .carousel-caption p{ font-size:20px;}
    .heroslider .carousel-control-next-icon, .heroslider .carousel-control-prev-icon{width: 2.5rem; height: 2.5rem;}
    .heroslider .carousel-indicators{ margin-bottom: -1.5rem;}

    .section_head h1{ font-size: 34px;}

    .the_company .box-main{ width:calc(50% - 40px); margin:10px 20px 10px 20px;}
    .the_company .box-main:nth-child(3), .the_company .box-main:nth-child(4){ width: auto;}
    .the_company .box-main img{ width: 100%;}
    .the_company .about_right{ justify-content: center;}
    .the_company .thumb-end{ order: inherit; margin-top:10px;}
    .the_company .box_bot{ margin-left: 0;}
    .the_company .box_top img{ width: auto !important;}

    .our_products .product_thumb{ width: 100%;}
    .our_products .detail_box{width: 100%; padding: 25px 25px 38px 25px;}
    .our_products .detail_box .btn-primary{ left: 25px;}
    .our_products .detail_box .short_desc{ height: auto;}
    .our_products .odd .product_box .product_thumb{ order: inherit;}

    .whychoose .icon_box{padding: 70px 0px;}
    .whychoose .icon_box .icon img{ width: 80px;}
    .whychoose .icon_box h3{padding: 0px 50px; font-size: 22px;}

    .contact_us .contact_wrapper .object2, .contact_us .object3{ display: none;}

    footer ul li strong{ display: inline-block;}
    
    #backtotop img{ max-width: 50px; height: auto;}

    .inner_head{ padding: 75px 0;}
    .inner_head h1{ font-size: 40px;}
    .product_detail{ padding-top: 50px; padding-bottom: 50px;}
    .product_detail .product_thumb{max-width: 100%; margin-left: 0;}
}

@media (max-width:767px){
    .navbar-brand img{ width: 200px;}
    .language{ width: 100%; text-align: center !important; margin-top: 0.5rem;}

    .whychoose .object{ display: none;}

    footer .quick_links{ margin-top:1rem !important;}

    .inner_head{ padding:40px 0;}
    .inner_head h1{ font-size:30px;}
    .sidebar{ margin-bottom: 1rem;}
    .product_detail .sidebar ul li{ display: inline-block; padding: 10px 10px;}
    .product_detail .sidebar ul li a{ font-size: 18px;}
}

@media (max-width:576px){
    .whychoose{ padding-bottom: 100px;}
    #backtotop{ bottom:75px;}
    #backtotop img{ max-width: 35px;}
    .contact_us .contact_wrapper{padding: 40px;}

    .inner_head{ padding:30px 0;}
    .inner_head h1{ font-size:35px;}
    .product_detail{ padding-top:30px; padding-bottom: 30px;}
    .product_detail .sidebar ul li{ display: inline-block; padding:5px 10px 5px 10px;}
    .product_detail .sidebar ul li:hover, .product_detail .sidebar ul li.active{ border-left-width: 3px;}
}

@media (max-width:479px){
    .section_head h1{ font-size:26px; margin-bottom: 1rem;}
    .section_head h2{ margin-bottom: 1rem; font-size: 18px;}
    .section_head h2 img{ margin: 0 10px;}
    .the_company .box-main{ width:calc(50% - 20px); margin: 10px;}

    .our_products .detail_box h2{ margin-bottom: 1rem;}
    .whychoose .passion_box{ font-size: 30px; line-height: 80px;}
    .contact_us .contact_wrapper{ padding: 20px;}

    .inner_head h1{ font-size: 26px; margin: 0;}
    .inner_head .breadcrumb{ font-size: 15px;}
    .product_detail .sidebar ul li a{ font-size: 15px;}
}

@media (max-width:424px){
    body{ font-size: 15px; line-height: 24px;}
    .the_company .box_top, .the_company .box_bot{ width: 148px; height: 148px;}
    .the_company .box_top img{ width: 60px !important; height: auto;}
    .the_company .box_bot h1{ font-size: 60px;}
}