/* index resposive */

@media (width < 768px){
    .navigators{
        display: none;
    }
    .mobile_phone_768px{
        display: none;
    }
    .web_bitmap_768px, .app_bitmap_768px, .graphic_bitmap_768px{
        display: none;
    }
    .rectangle_tablet{
        display: none;
    }
    .camp_768px, .builder_768px, .blogr_768px, .transfer_768px, .photon_768px, .express_768px{
        display: none;
    }
    .about_768px{
        display: none;
    }
}

@media (width >= 768px){
    .heading_container{
        padding: 67px 40.5px 67px 40.5px;
        align-items: center;
    }
    .header_navigation > img{
        display: none;
    }
    .navigators{
        display: flex;
        gap: 42px;
    }
    .navigators > a{
        color: #333136;
        font-family: Jost;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px; /* 100% */
        letter-spacing: 2px;
    }
    .mobile_phone_padding{
        padding-left: 40.5px;
        padding-right: 40.5px;
    }
    .mobile_phone_container{
        padding-top: 60px;
        border-radius: 15px;
        gap: 69px;
        background-image: url(./Images/About_Images/768px/Header_Oval_768px.svg);
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: center;
    }
    .mobile_phone_text > h1{
        max-width: 573px;
        color: #FFF;
        font-family: Jost;
        font-size: 48px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px; /* 100% */
    }
    .mobile_phone_text > p{
        max-width: 445px;
        margin-top: 32px;
        color: #FFF;
        font-family: Jost;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px; /* 162.5% */
    }
    .mobile_phone_text > button{
        margin-top: 19px;
    }
    .mobile_phone_375px{
        display: none;
    }
    .designs_container{
        margin-top: 120px;
        padding-left: 40.5px;
        padding-right: 40.5px;
    }
    .web_bitmap_375px, .app_bitmap_375px, .graphic_bitmap_375px{
        display: none;
    }
    .web_design_text > h1{
        color: #FFF;
        font-family: Jost;
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px; /* 120% */
        letter-spacing: 2px;
    }
    .app_design_text > h1{
        color: #FFF;
        font-family: Jost;
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px; /* 120% */
        letter-spacing: 2px;
    }
    .graphic_design_text > h1{
        color: #FFF;
        font-family: Jost;
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px; /* 120% */
        letter-spacing: 2px;
    }
    .view_projects > a{
        margin-top: 24px;
    }
    .three_skills_container{
        padding-left: 40.5px;
        padding-right: 40.5px;
        gap: 32px;
    }
    .three_skills_container > div{
        flex-direction: row;
        gap: 0;
        justify-content: space-between;
    }
    .passionate_text{
        gap: 16px;
        align-items: flex-start;
        text-align: start;
    }
    .passionate_text > p{
        max-width: 439px;
    }
    .resourceful_text{
        gap: 16px;
        align-items: flex-start;
        text-align: start;
    }
    .resourceful_text > p{
        max-width: 439px;
    }
    .friendly_text{
        gap: 16px;
        align-items: flex-start;
        text-align: start;
    }
    .friendly_text > p{
        max-width: 439px;
    }
    .footer_container{
        padding: 166px 40.5px 80px 40.5px;
    }
    .get_in_touch{
        width: 89.5%;
        padding: 57px 59px 57px 58px;
        top: -250px;
        background-image: url(./Images/About_Images/768px/Footer_Oval_768px.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .get_in_touch_text{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .get_in_touch_text > h1{
        max-width: 335px;
        color: #FFF;
        font-family: Jost;
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: 40px; /* 100% */
    }
    .get_in_touch_text > p{
        max-width: 450px;
        margin-top: 18px;
        color: #FFF;
        font-family: Jost;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px; /* 162.5% */
    }
    .rectangle_mobile{
        display: none;
    }
    .footer_designo{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .footer_navigation{
        flex-direction: row;
        gap: 42px;
    }
    .rectangle_tablet{
        width: 100%;
        margin-top: 46px;
        height: 1px;
        opacity: 0.1;
        background: #FFF;
    }
    .footer_last_text{
        margin-top: 31px;
        flex-direction: row;
        justify-content: space-between;
    }
    .footer_locations{
        flex-direction: row;
        text-align: start;
    }
    .header_design_padding{
        padding-left: 40.5px;
        padding-right: 40.5px;
    }
    .header_design_container{
        background-image: url(./Images/Web_Design_Images/768px/Oval_768px.svg);
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: center;
        padding: 64px 0 64px 0;
        border-radius: 15px;
    }
    .header_design_container > h1{
        color: #FFF;
        text-align: center;
        font-family: Jost;
        font-size: 48px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px; /* 100% */
    }
    .header_design_container > p{
        max-width: 410px;
        color: #FFF;
        text-align: center;
        font-family: Jost;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px; /* 162.5% */
    }
    .photon_375px, .express_375px, .transfer_375px, .blogr_375px, .camp_375px, .builder_375px{
        display: none;
    }
    .windows{
        margin-top: 120px;
        padding-left: 40.5px;
        padding-right: 40.5px;
        gap: 32px;
    }
    .windows > div{
        grid-template-columns: repeat(2, 1fr);
    }
    .windows > div > div > p{
        max-width: 277px;
    }
    .windows > div > img{
        border-top-right-radius: 0;
        border-bottom-left-radius: 15px;
    }
    .designs_container_webdesign{
        padding-left: 40.5px;
        padding-right: 40.5px
    }
    .laptop_padding{
        padding-left: 40.5px;
        padding-right: 40.5px;
    }
    .laptop_container{
        border-radius: 15px;
    }
    .laptop_container > img{
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
    }
    .laptop_text{
        position: relative;
        top: -8px;
        background-image: url(./Home/Images/OurCompany_Images/Laptop_Oval_765px.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: -100px;
        background-position-y: -500px;
        padding-top: 64px;
        padding-bottom: 64px;
    }
    .laptop_text > h1{
        color: #FFF;
        font-family: Jost;
        font-size: 48px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px; /* 100% */
    }
    .laptop_text > p{
        max-width: 573px;
        color: #FFF;;
        font-family: Jost;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px; /* 162.5% */
    }
    .world_class_padding{
        padding-left: 40.5px;
        padding-right: 40.5px;
        margin-top: 120px;
    }
    .world_class_container{
        border-radius: 15px;
    }
    .world_class_container > img{
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
    }
    .world_class_text{
        padding-top: 68px;
        padding-bottom: 68px;
        background-image: url(./Home/Images/OurCompany_Images/World_Class_Oval_768px.svg);
        background-repeat: no-repeat;
        background-position-y: -320px;
        background-position-x: 50px;
    }
    .world_class_text > h1{
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px;
    }
    .world_class_text > p{
        max-width: 572px;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px;
    }
    .about_375px{
        display: none;
    }
    .real_deal_padding{
        padding-left: 40.5px;
        padding-right: 40.5px;
    }
    .real_deal_container{
        border-radius: 15px;
    }
    .real_deal_container > img{
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
    }
    .real_deal_text{
        padding-top: 64px;
        padding-bottom: 90px;
        background-image: url(./Home/Images/OurCompany_Images/World_Class_Oval_768px.svg);
        background-repeat: no-repeat;
        background-position-y: -320px;
        background-position-x: 50px;
    }
    .real_deal_text > h1{
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px;
    }
    .real_deal_text > p{
        max-width: 572px;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px;
    }
    .canada_padding, .australia_padding, .united_kingdom_padding{
        padding-left: 40.5px;
        padding-right: 40.5px;
    }
    .canada_container > iframe{
        border-radius: 15px;
    }
    .australia_container > iframe{
        border-radius: 15px;
    }
    .united_kingdom_container > iframe{
        border-radius: 15px;
    }
    .canada_container, .australia_container, .united_kingdom_container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
    .locations_text{
        top: 0;
        border-radius: 15px;
        background-image: url(./Home/Images/Location_Images/Locations_Oval_768px.svg);
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: 88px;
        padding-bottom: 88px;
        padding-left: 75px;
        align-items: flex-start;
    }
    .locations_text > h1{
        color: #E7816B;
        font-family: Jost;
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px; /* 120% */
    }
    .paragraphs{
        text-align: left;
        flex-direction: row;
        gap: 100px;
    }
    .paragraphs > div > h6{
        color: #333136;
        font-family: Jost;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 26px; /* 162.5% */
    }
    .paragraphs > div > p{
        color: #333136;
        font-family: Jost;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px;
    }
    .contact_footer{
        padding: 87px 40.5px 80px 40.5px;
    }
    .input_padding{
        padding-left: 40.5px;
        padding-right: 40.5px;
    }
    .input_container{
        padding: 71px 58px 71px 58px;
        border-radius: 15px;
        background-image: url(./Home/Images/Contact_Images/Contact_Oval_768px.svg);
        background-repeat: no-repeat;
        background-position-x: left;
    }
    .left_side{
        align-items: flex-start;
        text-align: left;
    }
    .left_side > h1{
        color: #FFF;
        font-family: Jost;
        font-size: 48px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px; /* 100% */
    }
    .left_side > p{
        max-width: 573px;
        color: #FFF;
        font-family: Jost;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px; /* 162.5% */
    }
    .right_side > button{
        align-self: flex-end;
    }
    .burger_menu{
        display: none;
    }
}
@media (width < 1024px){
    .mobile_phone_1024px{
        display: none;
    }
    .web_bitmap_1024px, .app_bitmap_1024px, .graphic_bitmap_1024px{
        display: none;
    }
    .webdesign_1024px{
        display: none;
    }
    .about_1024px{
        display: none;
    }
}
@media (width >= 1024px){
    .heading_container{
        padding: 67px 120px 67px 120px;
    }
    .mobile_phone_768px{
        display: none;
    }
    .mobile_phone_padding{
        padding-left: 120px;
        padding-right: 120px;
    }
    .mobile_phone_container{
        padding: 0 0 0 55px;
        border-radius: 15px;
        flex-direction: row;
        justify-content: space-between;
        background-image: url(./Images/About_Images/1024px/Header_Oval.svg);
        background-repeat: no-repeat;
        gap: 0;
    }
    .mobile_phone_text{
        text-align: start;
        align-items: flex-start;
    }
    .mobile_phone_text >h1{
        max-width: 540px;
        text-align: start;
    }
    .mobile_phone_text > p{
        max-width: 445px;
        text-align: start;
    }
    .mobile_phone_text > button{
        margin-top: 40px;
    }
    .web_bitmap_768px, .app_bitmap_768px, .graphic_bitmap_768px{
        display: none;
    }
    .designs_container{
        margin-top: 160px;
        padding-left: 120px;
        padding-right: 120px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "web app" "web graphic";
        column-gap: 30px;
        row-gap: 24px;
    }
    .web_design{
        grid-area: web;
    }
    .app_design{
        grid-area: app;
    }
    .graphic_design{
        grid-area: graphic;
    }
    .three_skills_container{
        flex-direction: row;
        justify-content: center;
        gap: 30px;
    }
    .three_skills_container > div{
        flex-direction: column;
        gap: 48px;
    }
    .three_skills_container > div > div{
        text-align: center;
        align-items: center;
        gap: 32px;
    }
    .passionate_text >  p{
        max-width: 350px;
    }
    .resourceful_text >  p{
        max-width: 350px;
    }
    .friendly_text >  p{
        max-width: 350px;
    }
    .footer_container{
        margin-top: 380px;
        padding: 144px 120px 72px 120px;
    }
    .get_in_touch{
        width: 83.3%;
        top: -220px;
        background-image: url(./Images/About_Images/1024px/Footer_Oval.svg);
        background-repeat: no-repeat;
        padding: 72px 95px 72px 95px;
        flex-direction: row;
        justify-content: space-between;
        text-align: left;

    }
    .get_in_touch_text{
        align-items: flex-start;
    }
    .navigators > a:hover{
        text-decoration: underline;
    }
    .mobile_phone_text > a >  button:hover{
        background-color: #FFAD9B;
        transition: 1s;
        color: #FFF;
        cursor: pointer;
    }
    .designs_container > div > img:hover{
       opacity: 0.7;
       transition: 1s;
       cursor: pointer;
    }
    .get_in_touch> a > button:hover{
        background-color: #FFAD9B;
        transition: 1s;
        color: #FFF;
        cursor: pointer;
    }
    .footer_navigation > a:hover{
        text-decoration: underline;
    }
    .header_design_padding{
        padding-left: 120px;
        padding-right: 120px
    }
    .camp_768px, .builder_768px, .blogr_768px, .transfer_768px, .photon_768px, .express_768px{
        display: none;
    }
    .windows{
        margin-top: 160px;
        gap: 30px;
        padding-left: 120px;
        padding-right: 120px;

        grid-template-columns: repeat(3, 1fr);
    }
    .windows > div{
        grid-template-columns: repeat(1, 1fr);
    }
    .windows > div > div > p{
        max-width: 277px;
    }
    .windows > div > img{
        border-top-right-radius: 15px;
        border-bottom-left-radius: 0;
    }
    .designs_container_webdesign{
        margin-top: 160px;
        flex-direction: row;
        justify-content: space-between;
        padding-left: 120px;
        padding-right: 120px;
    }
    .windows > div:hover{
        cursor: pointer;
        background-color: #E7816B;
        transition: 1s;
    }
    .windows > div:hover h1{
        color: white;
    }
    .windows > div:hover p{
        color: #FFF;
    }
    .designs_container_webdesign > div > img:hover{
        opacity: 0.7;
        transition: 1s;
        cursor: pointer;
     }
     .about_768px{
        display: none;
     }
     .laptop_padding{
        padding-left: 120px;
        padding-right: 120px;
     }
     .laptop_container{
        display: grid;
        grid-template-columns: 60% 40%;

     }
     .laptop_container > img{
        grid-column-start: 2;
        border-top-left-radius: 0;
        border-bottom-right-radius: 15px;
        height: 100%;
        object-fit: cover;
     }
     .laptop_text{
        padding: 135px 95px 135px 95px;
        background-image: url(./Home/Images/OurCompany_Images/Laptop_Oval_1024px.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: 0;
        background-position-y: -70px;
        top: 0;
        grid-row-start: 1;
        text-align: start;
        align-items: flex-start;
        justify-content: center;
     }
     .laptop_text > p{
        max-width: 458px;
     }
     .world_class_padding{
        margin-top: 160px;
        padding-left: 120px;
        padding-right: 120px;
     }
     .world_class_container{
        display: grid;
        grid-template-columns: 40% 60%;
        background-position-x: 0;
        background-position-y: 0;
        background-size: cover;
     }
     .world_class_container > img{
        border-top-right-radius: 0;
        border-bottom-left-radius: 15px;
        height: 100%;
        object-fit: cover;
     }
     .world_class_text{
        padding: 154px 45px 154px 95px;
        text-align: start;
        align-items: flex-start;
        justify-content: center;
     }
     .world_class_text > p{
        max-width: 445px;
     }
     .about_locations_container{
        flex-direction: row;
        padding-left: 150px;
        padding-right: 150px;
        gap: 0;
        justify-content: space-between;
     }
     .about_locations_container > div > a > button:hover{
        background-color: #FFAD9B;
        transition: 1s;
        cursor: pointer;
     }
     .real_deal_padding{
        margin-top: 160px;
        padding-left: 120px;
        padding-right: 120px;
     }
     .real_deal_container{
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: repeat(1, );

     }
     .real_deal_container > img{
        grid-column-start: 2;
        border-top-left-radius: 0;
        border-bottom-right-radius: 15px;
        height: 100%;
        object-fit: cover;
     }
     .real_deal_text{
        padding: 154px 95px 154px 95px;
        grid-row-start: 1;
        text-align: start;
        align-items: flex-start;
        justify-content: center;
     }
     .real_deal_text > p{
        max-width: 445px;
     }
     .canada_padding, .australia_padding, .united_kingdom_padding{
        padding-left: 120px;
        padding-right: 120px;
     }
     .canada_container, .united_kingdom_container{
        grid-template-columns: 65% 35%;
     }
    .canada_container > iframe{
        grid-column-start: 2;
    }
    .canada_container > .locations_text{
        grid-row-start: 1;
    }
    .united_kingdom_container > iframe{
        grid-column-start: 2;
    }
    .united_kingdom_container > .locations_text{
        grid-row-start: 1;
    }
    .locations_text{
        padding: 0 0 0 95px;
        justify-content: center;
    }
    .australia_container{
        grid-template-columns: 35% 65%;
    }
    .input_padding{
        padding-left: 120px;
        padding-right: 120px;
    }
    .input_container{
        background-position-x: -200px;
        background-position-y: -200px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 55px 96px 54px 96px;
    }
    .right_side{
        width: 50%;
    }
    .right_side > p{
        max-width: 445px;
    }
    .contact_footer{
        margin-top: 160px;
    }
    .container1{
        background-image: url(./Home/Images/Contact_Images/contact_container_oval.svg);
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: 850px;
    }
    .right_side > button:hover{
        background: #FFAD9B;
        color: white;
        transition: 1s;
        cursor: pointer;
    }
}