@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* Reset CSS */
html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,menu,nav,section,time,mark,audio,video,details,summary{margin:0;padding:0;border:0;font-family:var(--inter);font-size:100%;vertical-align:baseline;background:transparent;color:var(--black);}
article,aside,figure,footer,header,nav,section,details,summary{display:block;}
html {-webkit-box-sizing:border-box;box-sizing:border-box;scroll-behavior:smooth;}
*::-webkit-scrollbar {width: 7px;}
*::-webkit-scrollbar-track {background-color:var(--primary);}
*::-webkit-scrollbar-thumb {background:var(--gray);}
* {scrollbar-color:var(--primary) var(--gray);scrollbar-width:thin;}
*,*:before,*:after {-webkit-box-sizing:inherit;box-sizing:inherit;}
:focus {outline:none !important;box-shadow: none !important;border-color: transparent !important;}
img {max-width: 100%;height: auto;}
a {margin: 0;padding: 0;text-decoration: none;vertical-align: baseline;background: transparent;}
a:focus,a:hover {text-decoration: none;vertical-align: baseline;background: transparent;}
p{margin-bottom: 0;}
body{position: relative;}

/* Variables */
:root {
    /* font-family */
    --inter:"Inter", sans-serif;

    /* Colors */
    --white : #FFFFFF;
    --primary :#f05523;
    
    --gray : #979899;
    --gray-100: #DBDBDB;
  
    --black :#161616;
    --black-100 : #000;
}
.container{max-width:1366px;}
.button_orange,
.button_orange:active,
.button_orange:focus{display:flex;justify-content:center;align-items:center;gap:10px;border-radius: 50px;font-family: var(--inter);width:auto;margin:0;padding:8px 20px;background-color:var(--primary);color:var(--white);text-transform:uppercase;font-size:16px; font-weight: 600; line-height:19px;outline:none;text-decoration:none;text-align:left;}
.button_orange:hover{background-color:var(--white);color:var(--black);font-family:var(--inter);}
.button,
.button:active,
.button:focus{display:flex;justify-content:center;align-items:center;gap:10px;border-radius: 3px; font-family: var(--inter);width:auto;margin:0;padding:13px 35px;border: none;background-color:var(--primary);color:var(--white);font-size:15px; font-weight: 500; line-height:19px;outline:none;text-decoration:none;text-align:left;}
.button:hover{background-color:var(--gray);color:var(--black);font-family:var(--inter);}

.custom-navbar {background-color: var(--black);padding: 12px 0; height: 80px; position: relative; transition: 0.3s;}
.custom-navbar.stickey {position: fixed;top: 0;left: 0;width: 100%;background-color: var(--black);z-index: 9999;box-shadow: 0 5px 20px rgba(0,0,0,0.25);}
.custom-navbar i{color: var(--primary);}
.navbar-nav{gap: 30px; margin-right: 20px;}
.main_btn{display: flex; justify-content: start; align-items: center; gap: 10px; }
.navbar-nav .nav-item .nav-link {color: var(--white);font-size: 18px;font-weight: 500;font-family: var(--inter);transition: transform .3s ease;display:inline-block;}
.navbar-nav .nav-item .nav-link:hover{transform: scale(1.12);}
.hero_banner{width: 100%; height: auto;}
.hero_banner .banner_content{background-color: var(--black);padding: 120px 30px 144px 30px;}
.hero_banner .banner_content .banner_img img{float: right;}
.hero_banner .banner_text{display: block;width: 100%;margin: 0;}
.hero_banner .banner_text h1{font-size: 40px; color: var(--gray-100); font-family: var(--inter); font-weight: 600;}
.hero_banner .banner_text p{padding: 40px 140px 20px 0; font-size: 17px; font-weight: 500; color: var(--gray-100); font-family: var(--inter); word-spacing: 3px;}
.hero_banner .banner_text .btn_group{display:flex;justify-content:flex-start;align-items:center;gap:30px; margin-top: 30px;}
.hero_banner .banner_text .rating_box{margin-top: 90px; display: flex;}
.hero_banner .banner_text .rating_box .rate-item h1{font-size: 30px;color: var(--gray-100);font-family: var(--inter);font-weight: 600;}
.hero_banner .banner_text .rating_box .rate-item span {color: var(--gray-100); font-size: 15px; font-family: var(--inter); margin-top: 7px;}
.hero_banner .banner_text .rating_box  .rate-item{ display: flex;flex-direction: column;align-items: flex-start;}
.hero_banner .banner_text .rating_box {display: flex;gap: 20%;margin-top: 50px;}

/* about-part */
.about_section{padding: 80px 30px 80px 30px;}
.about_section .about_content h1{font-size: 50px;color: var(--primary);font-weight: 600; font-family: var(--inter);}
.about_section .about_content p {font-size: 17px;margin-top: 20px;font-family: var(--inter);line-height: 1.4;color: #000;word-spacing: 5px;}
.about_section .about_img {margin-top: 30px;width: 100%;max-width: 400px;height: auto;object-fit: contain;}
.about_section .about_img img{width: 400px; height: auto;}
.about_section .about_content .key_feature h2{margin-top: 20px;font-size: 30px;font-weight: 600;font-family: var(--inter);margin-bottom: 10px;color: var(--black);}
.about_section .about_content .key_feature .feature-item span{color: var(--black); font-size: 20px; font-weight: 700; font-family: var(--inter);}
.about_section .about_content .key_feature .feature-item{margin: 15px 0px 15px 0; display: flex;gap: 15px;}
.about_section .about_content .key_feature .feature-item i{font-size: 25px;color: var(--primary);}

.steps_section{padding: 80px 10px 80px 10px; background-color: var(--black);}
.steps_section h2{font-size: 50px; font-weight: 600; color: var(--gray); text-align: center; word-spacing: 3px; margin-bottom: 50px; font-family: var(--inter);}
.steps_section .step .step-img{border-radius: 15px; width: 100%; height: auto;}
.steps_section .step .arrow-img{height: 170px;margin: 10px 0 20px 20px;}
.steps_section .step h3{font-size: 20px;color: var(--primary);text-align: center;font-weight: 700;font-family: var(--inter);margin-top: 15px;}
.steps_section .step p{font-size: 16px;text-align: center;margin-top: 10px;font-family: var(--inter);color: var(--white);}

.contact_section{padding:80px 30px 80px 30px;}
.contact_section .contact_title h1{color:var(--primary);font-size: 20px;margin-bottom: 20px; font-weight: 600; text-transform: uppercase;font-family: var(--inter);line-height: 1.2;}
.contact_section .contact_title h2{font-size: 50px; font-weight: 700; margin-bottom: 40px; font-family: var(--inter);}
.contact_section button{margin-top: 30px;}
.contact_section .form-control{border:none;border-bottom:2px solid var(--black-100);border-radius:0;background:transparent;box-shadow:none !important;padding: 0 0 10px 20px;font-size: 20px;}
.contact_section .form-control:focus{border-bottom:2px solid var(--primary) !important;}

.faq_section{padding: 80px 0; background-color: var(--black);}
.faq_section .faq_content{display: flex;justify-content: center;align-items: center;flex-direction: column;}
.faq_section .faq_content h4{font-size: 20px;text-transform: uppercase;margin-bottom: 40px;color: var(--primary);font-weight: 600;font-family: var(--inter)}
.faq_section .faq_content h1{font-size: 50px;margin: 0 50px 0 50px;text-align: center;margin-bottom: 20px;color: var(--gray);font-weight: 600;font-family: var(--inter);}
.faq_section .accordians .faq-accordion .accordion-item{background:transparent;}
.faq_section .accordians .faq-accordion .accordion-item{border: none;position: relative;}
.faq_section .accordians .faq-accordion .accordion-item::after{content:"";position:absolute;left:-20px;right:-20px;bottom:0;height:2px;background: rgba(255,255,255,0.15);}
.faq_section .accordians .faq-accordion .accordion-button{background-color: transparent;color: var(--gray);font-size: 17px;font-weight: 600;padding: 20px 0;box-shadow: none;font-family: var(--inter);}
.faq_section .accordians .faq-accordion .accordion-button:not(.collapsed){color:var(--primary);}
.faq_section .accordians .faq-accordion .accordion-button::after{background-image:none;content:"\f107";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--gray);transform:rotate(0deg);transition:.3s ease;}
.faq_section .accordians .faq-accordion .accordion-button:not(.collapsed)::after{color:var(--primary);transform:rotate(180deg);}
.faq_section .accordians .faq-accordion .accordion-body{color:var(--white);padding: 0 0 20px 0; line-height:1.7; font-size: 16px; word-spacing: 3px; font-family:var(--inter);}

.footers{padding-top:60px;background-color: var(--primary);}
.footers .foot_logo h4{font-size: 17px;color: var(--white);font-family: var(--inter);font-weight: 600;margin: 10px auto;}
.footers .foot_logo p{font-size: 12px;color: var(--white);font-family: var(--inter);font-weight: normal;}
.footers .foot_logo img{width: 250px;}
.footers .footer_links{margin:auto 20px;}
.footers .footer_links h2{font-size: 25px;margin-bottom: 20px;line-height: 1;color: var(--white);font-family: var(--inter);font-weight: bold;}
.footers .footer_links ul li{list-style-type:none;font-size: 17px;line-height: 1.9; font-family: var(--inter);}
.footers .footer_links ul li a{color: var(--white);}
.footers .footer_links ul li a:hover{color: var(--black);}
.copyrights{width:100%; margin-top:60px;padding:20px 0;text-align:center;color:var(--white);font-size:14px;border-top:1px solid var(--white);}

.scroll-top-btn {position: fixed;bottom: 40px;right: 15px;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;background-color: var(--primary);color: var(--white);font-size: 20px;line-height: 1;cursor: pointer;border-radius: 2px;box-shadow: 0 4px 6px rgba(0,0,0,0.3);z-index: 9999;display: none;padding: 0;margin: 0;transition: all 0.3s ease;}
.scroll-top-btn i {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;font-size: 15px;margin: 0;padding: 0;line-height: 1;}
.custom-toggler{width: 45px;height: 45px;border: 1px dashed var(--primary);border-radius: 2px;position: relative;background: transparent;}
.custom-toggler i{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);color: var(--primary);font-size: 22px;transition: .3s ease;opacity: .85;font-size: 18px;transform: translate(-50%, -50%) scale(.85);opacity: .75;filter: drop-shadow(0 0 6px var(--primary));}
.custom-toggler .close-icon{opacity: 0;transform: translate(-50%, -50%) scale(.5);}
.custom-toggler:not(.collapsed) .open-icon{opacity: 0;transform: translate(-50%, -50%) scale(.5);}
.custom-toggler:not(.collapsed) .close-icon{opacity: 1;transform: translate(-50%, -50%) scale(1);}

@media (max-width: 991px) {
    .navbar-collapse {background-color: var(--black);border-radius: 10px;padding: 15px 0 15px 10px; text-align: left;}
    .navbar-nav {margin-bottom: 15px; gap: 0;}
    .navbar-nav .nav-link {color: var(--white)!important;font-size: 18px;padding: 10px 0;}
    .navbar-collapse .btn {margin-bottom: 10px;}
    .custom-navbar.stickey {position: static;box-shadow: none;}
    .hero_banner .banner_content{padding: 40px;}
    .hero_banner .banner_text h1{font-size: 30px;}
    .hero_banner .banner_text p{margin: 20px auto; padding: 0;}
    .about_section{padding: 40px 0 40px 0; position: relative;overflow: visible;}
    .about_section .about_content h1{font-size: 40px;}
    .about_section .about_img{justify-content: center;text-align: center;margin-bottom: 30px;  position: sticky;top: 100px;height: fit-content;max-width: 320px;}
    .about_section .about_img img {width: 100%;height: auto;position: relative;}
    .steps_section .step .arrow-img{height: 100px;}
    .steps_section{padding: 40px 0 40px 0;}
    .steps_section h2{font-size: 40px;}
    .faq_section{padding: 40px 0 50px 0;}
    .faq_section .faq_content h1{font-size: 30px;}
    .contact_section{padding: 40px 10px 40px 10px;}
    .contact_section .form-control{margin-bottom: 20px;}
    .footers{padding-top:30px;}
    .footers .footer_links{margin: 20px auto;}
    .copyrights{margin-top: 20px;}
}
@media (max-width: 479px) {
    .logo-img{height: 30px;}
    .navbar-nav{text-align: left;}
    .navbar-collapse{padding: 15px 0 15px 10px;position: absolute;top: 100%;left: 0;width: 100%;}
    .navbar-nav .nav-item .nav-link{font-size: 15px;}
    .custom-navbar.stickey {position: sticky;box-shadow: none;}
    .hero_banner .banner_content{padding: 20px;}
    .hero_banner .banner_text h1{font-size: 20px;}
    .hero_banner .banner_text p{font-size: 15px; margin-top: 30px;}
    .hero_banner .banner_text p{padding: 0;}
    .hero_banner .banner_text .btn_group button{width: 100%; padding: 10px 10px;}
    .hero_banner .banner_text .rating_box{gap: 15%;}
    .hero_banner .banner_text .rating_box .rate-item h1{font-size: 20px;}
    .hero_banner .banner_content .banner_img img{padding: 20px;}
    .hero_banner .banner_text .rating_box{margin-top: 30px;}
    .about_section{padding: 40px 0 40px 0;}
    .about_section .about_img img{width: 300px;}
    .about_section .about_content h1{font-size: 30px; text-align: center;}
    .about_section .about_content .key_feature h2{font-size: 20px;}
    .about_section .about_content .key_feature .feature-item span{font-size: 15px;}
    .about_section .about_content .key_feature .feature-item{margin: 10px 0 10px 0;}
    .contact_section .form-control{margin-bottom: 20px;}
    .steps_section{padding: 40px 0 40px 0}
    .steps_section h2{font-size: 30px; margin-bottom: 30px;}
    .steps_section .step{max-width: 360px;margin: 0 auto 70px;position: relative;text-align: center;padding-bottom: 10px;}
    .steps_section .step .arrow-img{height: 200px;}
    .steps_section .step p{margin-bottom: 20px;}
    .steps_section .step::after{content: "\f175";font-family: "Font Awesome 6 Free";font-weight: 800;position: absolute;bottom: -50px;left: 50%;transform: translateX(-50%);font-size: 40px;color: var(--primary);display: block;}
    .contact_section {padding: 40px 0 40px 0}
    .contact_section .contact_title h2{font-size: 30px; margin-bottom: 20px;}
    .faq_section{padding:40px 0 50px 0}
    .faq_section .faq_content h1{font-size: 30px;}
    .faq_section .faq_content h4{margin-bottom: 20px;}
    .faq_section .faq_content img{width: 200px; height: auto;}
    .footers .footer_links{margin: 15px auto;}
    .footers .footer_links h2{font-size: 20px; margin-bottom: 10px;}
    .steps_section .arrow-img{display: none !important;}
    .arrow{margin-bottom: 30px !important;}
    .steps_section .row > div:last-child .step::after{display: none;}
    .steps_section [class*="col-"]:last-child .step{margin-bottom: 0;padding-bottom: 0;}
}