:root{
    --primary: #FFAE00;
    --secondary: #F54200;
    --third: #47A779;
    --black: #000;
    --white: #fff;
    --red: #ff0000;
    --lightgray: #ECF0F3;
    --gray: #666;
    --_box_shadow: 0 0 9px 0 rgb(109 117 143 / 5%);


    --darkgray: #cdd9e1;

    --darkblack: #1f2732;
    --radius30: 30px;
    --radius6: 6px;
    --bgGradient: linear-gradient(90deg, var(--secondary) 20%, var(--primary) 100%);
    --imgbg: linear-gradient(0deg, var(--third) 0%, rgba(0, 0, 0, 0) 55%);
    --imgbgSecond: linear-gradient(0deg, var(--secondary) 0%, rgba(0, 0, 0, 0) 55%);
    --whatsapp: #74CB6B;

}

html{scroll-behavior: smooth;}
h1,h2,h3,h4,h5,h6{line-height: 1.2em}
body{font-family: "Barlow", sans-serif; font-size: 17px;font-style: normal;background-color: var(--lightgray);line-height: 1.5em}
a,svg,.neden div,li,.button_second{transition-duration: 0.4s;}
ul{list-style: none;margin: 0;padding: 0}
button{border: none;}
.hover_secondaryColor:hover{color: var(--secondary)}
.hover_secondary:hover{background-color: var(--secondary) !important;color:var(--white) !important;}
.gradientText{background: var(--bgGradient);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.gradientBg{color: var(--white);position: relative;width: fit-content;z-index: 1;padding: 15px 20px;font-weight: 700;text-transform: uppercase;display: flex;align-items: center}
.gradientBg:after{background: var(--bgGradient);content:'';width: 100%;height: 100%;position: absolute;top:0;left: 0;border-radius: var(--radius6);z-index: -1}
.gradientBg .svgRight,.transparentBg .svgRight{margin-left: 10px}
.gradientBg .svgLeft, .transparentBg .svgLeft{margin-right: 10px}
.transparentBg{padding: 10px 20px;border: 1px solid var(--black);width: fit-content;border-radius: var(--radius6);align-items: center;display: flex;color: var(--black);font-weight: 600;}
.transparentBg:hover{background-color:var(--white);}
.transparentBg:hover svg{padding-bottom:5px;}

.menu{margin-top: 30px;background-color: var(--white);border-radius: var(--radius6);padding: 20px 30px;}
.menu .logo{width: 200px;margin-top: 10px}
.menu .menuContent{width: calc(100% - 400px)}
.menu .menuContent li{display: inline-flex}
.menu .menuContent li a{padding: 15px;font-weight: 600;font-size: 15px}
.menu .menu_right{width: fit-content;float: inline-end}
.menu .menu_right a{background-color: var(--black);color:var(--white);padding: 12px 40px;border-radius:var(--radius30);font-weight: 700;display: flex;align-items: center}
.menu .menu_right svg{margin-left: 10px}

.slider{display: flex;align-items: center;margin-top: 20px}
.slider h1{font-size: 65px}
.slider h2{font-size: 36px;color:var(--secondary);border:1px solid var(--black);border-radius: var(--radius6);padding:0 10px 10px 10px;width: fit-content;margin: 30px 0}
.slider h3{font-size: 17px;font-weight: normal;color: var(--gray)}
.slider .link{margin-top: 30px}
.slider .sliderImg{position: relative;text-align: right}
.slider .sliderImg svg{position: absolute;top: 13px;right: 13px;fill:var(--white);}
.slider .sliderImg svg path:first-child{stroke:var(--white);fill:transparent}
.slider .gradientBg:hover svg{transform:rotate(50deg);}
.slider .sliderImg img{border-radius:var(--radius30);}

.info,.services,.experience,.pricing,.faq,.contact,.copyright{padding:50px 0;overflow:auto;}

.info{margin-top: 50px;border-top:1px solid var(--darkgray)}
.info .w3-row:first-child{display: flex;align-items: center;}
.info .w3-row:last-child{padding: 50px 0}
.info .info_content{width:40%;float:left;}
.info .info_detail{background-color: var(--white);padding: 50px 20px;border-radius: var(--radius6);font-size: 70px;font-weight: 700;}
.info .info_detail:first-child{margin-right:5px;}
.info .info_detail .info_deep{font-size:17px;font-weight:400;display:inline-flex;}
.info .infoText{color:var(--gray);}
.info a{margin-top: 25px}

.services .services_content{padding:70px 35px;background-color:var(--white);border-radius:var(--radius30);margin-right:20px;border:1px solid var(--lightgray);box-shadow: var(--box_shadow)}
.services .services_content:hover{border-color: var(--primary)}
.services .services_content_lastt{margin-right:0;}
.services .title_content{margin-bottom: 60px}
.services .little_title,.faq .little_title{margin-bottom: 25px;padding: 8px 30px;border: 1px solid var(--darkgray);border-radius: var(--radius30);width: fit-content;display: inline-block;font-size: 18px;font-weight: 600;}
.services .big_title{font-size: 55px;}
.services .services_content h4{font-size:24px;}
.services .services_content{font-size:17px;}
.services .icon{margin-bottom:30px}
.services .icon svg{color:var(--primary);}
.services .link{display:flex;align-items:center;font-weight:600;margin-top:30px;}
.services .link svg{margin-right:10px;}

.experience b{font-size: 36px}
.experience .timeline_content{position: relative;z-index: 1;padding-left: 30px;border-left: 2px solid var(--darkgray);margin-left: 8px;margin-top: 50px;}
.experience .experience_content.left .experience_container{margin-right: 25px}
.experience .experience_content.right .experience_container{margin-left: 25px}
.experience .timeline_body:after{position: absolute;left: -49px;top: 35px;content: "";height: 36px;width: 36px;background: var(--bgGradient);border-radius: 50%;border: 10px solid var(--lightgray);}
.experience .timeline_body{background: linear-gradient(0deg, var(--white) 20%, var(--lightgray) 100%);border: 1px solid var(--white);border-radius: 10px;box-shadow: var(--box_shadow);position: relative;transition: all 0.35s ease-in-out;margin-bottom: 30px;}
.experience .timeline_head{padding: 30px;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid var(--white)}
.experience .timeline_head h5{font-size: 20px;margin: 0}
.experience .timeline_head p{font-size: 17px;margin: 0}
.experience .timeline_head .w3-half:last-child{display: contents}
.experience .timeline_text{padding: 40px 30px}
.experience .timeline_text p{font-size: 17px;color:var(--gray);margin: 0}

.pricing .title_content{margin-bottom: 60px}
.pricing .little_title{margin-bottom: 25px;padding: 8px 30px;border: 1px solid var(--darkgray);border-radius: var(--radius30);width: fit-content;display: inline-block;font-size: 18px;font-weight: 600;}
.pricing .big_title{font-size: 55px;}
.pricing .pricing_content{border: 1px solid var(--darkgray);border-radius: var(--radius30);background: linear-gradient(0deg, var(--white) 10%, var(--lightgray) 100%);padding: 50px;}
.pricing .pricing_content.left{margin-right: 25px}
.pricing .pricing_content.right{margin-left: 25px}
.pricing .pricing_head{display: flex;align-items: center;border-bottom: 1px solid var(--darkgray);padding-bottom: 30px;margin-bottom: 30px;}
.pricing .pricing_head svg{color: var(--primary)}
.pricing .pricing_head h6{font-size: 24px}
.pricing .pricing_head b{font-size: 17px}
.pricing .pricing_head p{color: var(--gray)}
.pricing .price{font-size: 45px;font-weight: 600;display: flex;align-items: center;margin-bottom: 30px}
.pricing .price span{font-size: 25px}
.pricing .pricing_body ul{margin: 0; padding: 0;overflow: auto;color: var(--gray)}
.pricing .pricing_body li{float: left;
    width: 50%;
    padding: 0 20px;
    margin-top: 7px;
    font-weight: 400;
    position: relative;
    z-index: 1;}
.pricing .pricing_body li:after{position: absolute;
    left: 0;
    top: 9px;
    content: "";
    height: 10px;
    width: 10px;
    z-index: -1;
    background: var(--bgGradient);
    border-radius: 50%;}
.pricing .pricing_body .pricing_btn{margin-top: 30px}

.faq .faq_content{margin-top:30px}
.faq .big_title{font-size:36px;font-weight:600;}
.faq .faq_body{margin-bottom:15px;background-color:var(--white);border-radius:10px}
.faq .question{padding:22px 70px 22px 40px;font-size:20px;border-radius:0;display:flex;position:relative;align-items:center}
.faq .answer{margin:0 40px;padding:30px 0 40px 00;font-size:17px;}
.faq .faq_body .answer:first-child{display:block;}
.faq .faq_img img{border:4px solid var(--white);border-radius:var(--radius30)}
.faq .faq_img{padding-right:120px;}
.faq .question .svg{position:absolute;right:20px;width:32px;height:32px;}

.contact{border: 1px solid var(--darkgray);border-radius: var(--radius30);background: linear-gradient(0deg, var(--white) 10%, var(--lightgray) 100%);padding: 50px;}
.contact .contact_title{    text-align: center;font-size: 80px;font-weight: 600;color: transparent;-webkit-text-stroke: 1px var(--secondary);margin-bottom:75px;}
.contact .form_content{margin:auto;float:none;}
.contact .form_content input, .contact .form_content select, .contact .form_content textarea{padding: 15px 20px;border-radius: var(--radius6);border: 1px solid var(--darkgray);margin-bottom: 20px;}
.contact .form_button{border:0 !important;background-color:var(--secondary);color:var(--white);font-weight:600;}
.contact .form_button:hover{background-color:var(--primary);}
.contact .iti{width:100%;}
.contact input[type=submit][disabled=disabled]{background-color:#444;}

.copyright{font-size:14px;color:var(--darkblack);}

.cd-headline span {display: inline-block;padding: 0;}
.cd-headline .cd-words-wrapper {overflow: hidden;vertical-align: middle;}
.cd-headline .cd-words-wrapper::after {content: '';position: absolute;top: 50%;right: 0;width: 2px;height: 80%;background-color: var(--secondary);transform: translateY(-50%);}
.cd-headline .is-hidden{opacity: 0;}
.cd-headline .is-visible {opacity: 1;}
.cd-words-wrapper {display: inline-block;position: relative;text-align: left;}
.cd-words-wrapper b {display: inline-block;position: absolute;white-space: nowrap;left: 0;top: 0;}
.cd-words-wrapper b.is-visible {position: relative;}


/* MOBIL CSS */
@media only screen and (max-width: 559px) {
    .menuContent,.menu_right span{display: none}
    .menu .menu_right a{padding: 10px 10px 10px 2px}
    .slider h1{font-size: 48px}
    .slider .sliderImg img{width: 100%}
    .slider .sliderImg svg{top: 10px;right: 15px}
    .slider .sliderImg,.pricing .pricing_content.right{margin-top: 30px}
    .info .w3-row:first-child{display: block}
    .info .info_content{width: 50%}
    .info .info_detail{height: 175px}
    .info .w3-right-align{text-align: left !important;}
    .info, .services, .experience, .pricing, .faq, .contact, .copyright{padding: 30px 0}
    .info .w3-row:last-child{padding: 30px 0 0 0}
    .services .big_title,.pricing .big_title{font-size: 36px;line-height: normal}
    .services .services_content{margin-right: 0;margin-bottom: 20px}
    .experience .experience_content.right .experience_container,.pricing .pricing_content.right{margin-left: 0}
    .experience .experience_content.left .experience_container,.pricing .pricing_content.left{margin-right: 0}
    .experience .timeline_head{padding: 15px}
    .experience .timeline_text{padding: 20px 15px}
    .pricing .pricing_content{padding: 25px}
    .pricing .pricing_body li{width: 100%}
    .faq .faq_img{margin-bottom: 20px;padding-right:0;}
    .faq .question,.faq .answer{padding: 20px}
    .faq .answer{margin: 0}
    .contact .contact_title{font-size: 50px;margin-bottom: 35px}

}