@font-face {
    font-family: 'Gilroy-Bold';
    src: url('fonts/Gilroy-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy-Medium';
    src: url('fonts/Gilroy-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy-Light';
    src: url('fonts/Gilroy-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy-SemiBold';
    src: url('fonts/Gilroy-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Michroma';
    src: url('fonts/Michroma-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins-Medium';
    src: url('fonts/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-Regular';
    src: url('fonts/Inter-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.container {
    position: relative;
}

.background {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;

    min-height: 100vh;
    height: 4182px;
    
    background-image: url("img/Background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
}

.home_section {
    width: 100%;
    height: 870px;
    background-image: url("img/HomeSection.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home_section_header {
    height: 104px;
    margin: 40px 10% 0 10%;

    display: flex;
    justify-content: space-between;
    align-items: center;  
}

.home_section_header_logo {
    width: 134px;
    height: 38px;
}

.home_section_header_menus {
    display: flex;
    gap: 60px; 
}

.home_section_header_menu {
    font-family: "Poppins-Medium", sans-serif;
    font-size: 14px;
    color: white;
}

.home_menu_section .services_menu{
    position: absolute;
    top: 47px;
    left: 913px;
    width: 59px;
    height: 20px;

    opacity: 1;
}

.home_section_content {
    display: flex;
}

.home_section_content_logo {
    position: absolute;
    top: 327px;
    left: 137px;
}

.home_section_content_text {
    position: absolute;
    top: 327px;
    left: 360px;
    
    position: flex;
    flex-direction: column;
}

.home_section_content_text_title {
    font-family: "Gilroy-Light", sans-serif;
    font-size: 80px;
    font-weight: lighter;
    color: white;
}

.home_section_content_text_title_bold {
    font-family: "Gilroy-SemiBold", sans-serif;
    font-size: 80px;
    color: white;
}

.home_section_content_text_subtitle {
    font-family: "Gilroy-Medium", sans-serif;
    font-size: 18px;
    font-weight: lighter;
    color: white;

    padding-bottom: 5px;
}

.services_section {
    width: 100%;
    height: 658px;
}

.services_section_title {
    position: absolute;
    top: 65px;
    width: 100%;
    display: flex;
    justify-content: center;

    font-family: "Michroma", sans-serif;
    font-size: 32px;
    color: #3E4581;
}

.services_section_subtitle {
    position: absolute;
    top: 115px;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Gilroy-Medium", sans-serif;
    font-size: 20px;
    font-weight: lighter;
    color: #3E4581;
}

.services_section_widgets {
    position: absolute;
    top: 239px;
    width: 100%;

    display: flex;
    justify-content: center;
    gap: 40px;
}

.services_section_widget {
    position: relative;
    width: 282px;
    height: 270px;

    background-image: url("img/ServicesWidgetBase.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.services_section_widget_logo {
    position: absolute;
    top: 36px;
    left: 36px;
    width: 60px;
    height: 60px;

    background-image: url("img/ServicesWidgetBorderLogo.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
}

.services_section_widget_title {
    position: absolute;
    top: 105px;
    left: 36px;
    right: 36px;
    height: 49px;

    display: flex;
    justify-content: left;
    align-items: center;

    font-family: "Gilroy-Medium", sans-serif;
    font-size: 20px;
    color: white;

}

.services_section_widget_content {
    position: absolute;
    top: 162px;
    left: 36px;
    right: 36px;
    height: 84px;

    display: flex;
    justify-content: left;

    font-family: "Gilroy-Light", sans-serif;
    font-size: 14px;
    font-weight: lighter;
    color: white;
    opacity: 0.75;
}

.trustedby_section {
    width: 100%;
    height: 254px;
    background-image: url("img/TrustedBySection.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.trustedby_section_title {
    position: absolute;
    top: 53px;
    width: 100%;
    display: flex;
    justify-content: center;

    font-family: "Gilroy-Medium", sans-serif;
    font-size: 20px;
    font-weight: lighter;
    color: #3E4581;
}

.trustedby_section_content {
    position: absolute;
    top: 109px;
    height: 84px;
    width: 100%;
}

.trustedby_section_widgets {
    position: absolute;
    width: 100%;

    display: flex;
    justify-content: center;
    gap: 100px;
}

.trustedby_section_widget {
    position: relative;
}

.whybesmartcoding_section {
    width: 100%;
    height: 920px;
}

.whybesmartcoding_section_title {
    position: absolute;
    top: 98px;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Michroma", sans-serif;
    font-size: 32px;
    color: #3E4581;
}

.whybesmartcoding_section_subtitle {
    position: absolute;
    top: 153px;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Gilroy-Medium", sans-serif;
    font-size: 20px;
    font-weight: lighter;
    color: #3E4581;
}

.whybesmartcoding_section_content {
    position: absolute;
    top: 267px;
    width: 100%;
}

.whybesmartcoding_section_widgets {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.whybesmartcoding_section_widget_title {
    position: absolute;
    top: 75px;
    width: 100%;
    height: 71px;

    display: flex;
    justify-content: center;

    font-family: "Gilroy-Light", sans-serif;
    font-size: 26px;
    font-weight: lighter;
    color: white;
}

.whybesmartcoding_section_widget_logo {
    position: absolute;
    top: 165px;
    width: 100%;
    height: 60px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.whybesmartcoding_section_widget_content {
    position: absolute;
    top: 250px;
    left: 17px;
    width: 100%;
    height: auto;

    font-family: "Gilroy-Light", sans-serif;
    font-size: 14px;
    font-weight: lighter;
    color: white;
}

.whybesmartcoding_section_widget_content_bullets {
    display: flex;
    flex-direction: column;
    gap: 12px; 
}

.whybesmartcoding_section_widget_content_bullet {
    display: flex;
    align-items: center;
    margin-left: 3px; 
}

.whybesmartcoding_section_widget_content_bullet img {
    margin-right: 14px;
    width: 12px; 
    height: 12px;
}

.whybesmartcoding_section_widget_content_bullet span {
    font-family: "Gilroy-Light", sans-serif;
    font-size: 16px;
    color: white;
}

.whybesmartcoding_section_widget_1 {
    position: relative;
    width: 281px;
    height: 508px;

    background-image: url("img/WhyBeSmartCoding_Widget_1.png");
    background-position: center;
    background-repeat: no-repeat;
}

.whybesmartcoding_section_widget_2 {
    position: relative;
    width: 281px;
    height: 508px;

    background-image: url("img/WhyBeSmartCoding_Widget_2.png");
    background-position: center;
    background-repeat: no-repeat;
}

.whybesmartcoding_section_widget_3 {
    position: relative;
    width: 281px;
    height: 508px;

    background-image: url("img/WhyBeSmartCoding_Widget_3.png");
    background-position: center;
    background-repeat: no-repeat;
}

.whybesmartcoding_section_widget_4 {
    position: relative;
    width: 281px;
    height: 508px;

    background-image: url("img/WhyBeSmartCoding_Widget_4.png");
    background-position: center;
    background-repeat: no-repeat;
}

.techstack_section {
    width: 100%;
    max-width: 1164px;
    height: 592px;

    margin: 0 auto;

    background-image: url("img/TechStackSection.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.techstack_section_title {
    position: absolute;
    top: 91px;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Michroma", sans-serif;
    font-size: 32px;
    color: #3E4581;
}

.techstack_section_subtitle {
    position: absolute;
    top: 61px;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Gilroy-Medium", sans-serif;
    font-size: 20px;
    font-weight: lighter;
    color: #3E4581;
}

.techstack_section_content {
    position: absolute;
    top: 169px;
    width: 100%;
    height: auto;
}

.techstack_section_widgets {
    display: flex;
    justify-content: center;
    gap: 10px; 
    align-items: flex-start; 
}

.techstack_section_widget {
    width: 100%;
    max-width: 293px; 
    height: 308px; 

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;

    background: white; /* just for visibility */
    border-radius: 2px;
}

.techstack_section_widget:nth-child(2) {
    margin-top: 45px;
}

.techstack_section_widget_logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contactus_section {
    width: 100%;
    height: 646px;
}

.contactus_section_title {
    position: absolute;
    width: 100%;
    top: 183px;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Gilroy-Medium", sans-serif;
    font-size: 44px;
    color: #3E4581;
}

.contactus_section_subtitle {
    position: absolute;
    width: 100%;
    top: 330px;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Michroma", sans-serif;
    font-size: 32px;
    color: #3E4581;
}

.contactus_section_text {
    position: absolute;
    width: 100%;
    top: 380px;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Gilroy-Medium", sans-serif;
    font-size: 16px;
    font-weight: lighter;
    color: #3E4581;
}

.footer_section {
    width: 100%;
    height: 245px;
}

.footer_section_content {
    margin: 15px 280px 0 280px;

    display: flex;
    justify-content: space-between;
    align-items: center;  
}

.footer_section_logo {

}

.footer_section_menus {
    display: flex;
    gap: 40px; 
}

.footer_section_menu {
    font-family: "Poppins-Medium", sans-serif;
    font-size: 14px;
    color: #3E4581;
}

.footer_section_socialnetworks {
    display: flex;
    gap: 20px;
}

.footer_section_line {
    margin: 50px 0px 0px 0px;

    display: flex;
    justify-content: center;
    align-items: center;  
}

.footer_section_copyright {
    margin: 25px;

    display: flex;
    justify-content: center;
    align-items: center;  

    font-family: "Inter-Regular", sans-serif;
    font-size: 12px;
    font-weight: lighter;
    color: #3E4581;
}