import React from 'react'
import Title from '../UI/Title';
import Ranges from './Ranges';
import Output from './Output';
import Addictional from './Addictional';

const Calculator = () => {
    return (
        <section className={'bg-[#F7F7FF] pt-[70px] max-2xl:pt-10 max-lg:pt-7 md:h-[700px] xl:h-[710px] 2xl:h-[890px] max-sm:px-3 max-lg:px-6'}>
            <div className="container h-full mx-auto flex flex-col items-center relative">
                <Title className='mb-[70px] max-2xl:mb-12 max-md:mb-4 md:max-lg:mb-8' subtitle='Точно рассчитайте свои затраты без лишних усилий' h1>Калькулятор стоимости <span className='text-red-500'>бухгалтерских услуг</span></Title>
                <div className="w-full flex justify-between">
                    <div className="">
                        <Ranges></Ranges>
                        <Addictional></Addictional>
                    </div>
                    <Output></Output>
                </div>
                
            </div>
        </section>
    )
}

export default Calculator;