Services section merged to development

development/css/abstracts/_mixins.scss

@@ -67,13 +67,25 @@
 }
 
 %wrap {
-  width: 80%;
+  width: 50%;
   margin-left: auto;
   margin-right: auto;
 
+  @include full-hd-styles {
+    width: 70%;
+  }
+
+  @include laptop-lg-styles {
+    width: 80%;
+  }
+
+  @include laptop-l-styles {
+    width: 90%;
+  }
+
   @include tablet-styles {
     width: 100%;
-    padding-left: math.div(var.$gutter-base, 2);
-    padding-right: math.div(var.$gutter-base, 2);
+    padding-left: var.$gutter-base;
+    padding-right: var.$gutter-base;
   }
 }

development/css/components/_index.scss

 @forward "./banner";
+@forward "./services";

development/css/components/_services.scss

+@use "../abstracts/mixins" as mix;
+@use "../abstracts/variables" as var;
+@use "sass:math";
+
+.services {
+  @extend %section;
+  @extend %wrap;
+  text-align: center;
+  .services__about {
+    display: flex;
+    align-items: center;
+    @include mix.mobile-l-styles {
+      flex-wrap: wrap;
+    }
+    .col-50 {
+      padding-left: var.$gutter-base;
+      padding-right: var.$gutter-base;
+      @include mix.laptop-lg-styles {
+        padding-left: (var.$gutter-base * 3.3);
+        padding-right: (var.$gutter-base * 3.3);
+      }
+      @include mix.laptop-m-styles {
+        padding-left: (var.$gutter-base * 2.5);
+        padding-right: (var.$gutter-base * 2.5);
+      }
+      @include mix.tablet-styles {
+        padding-left: math.div(var.$gutter-base, 1.5);
+        padding-right: math.div(var.$gutter-base, 1.5);
+      }
+      @include mix.mobile-l-styles {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      img {
+        width: 400px;
+        @include mix.laptop-lg-styles {
+          width: 300px;
+        }
+      }
+      p {
+        text-align: justify;
+        margin-bottom: 0;
+        font-size: var.$font-size-big;
+        @include mix.laptop-lg-styles {
+          font-size: var.$font-size-medium;
+        }
+      }
+    }
+  }
+  .services__cards {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: (var.$gutter-base * 3);
+    margin-right: -(var.$gutter-base * 1.5);
+    height: 70vh;
+    @include mix.full-hd-styles {
+      height: 100vh;
+    }
+    @include mix.laptop-lg-styles {
+      margin-right: -(var.$gutter-base);
+      margin-top: (var.$gutter-base * 2);
+      height: 120vh;
+    }
+    @include mix.tablet-styles {
+      margin-right: -(math.div(var.$gutter-base, 2));
+    }
+    @include mix.mobile-l-styles {
+      margin-right: 0;
+      margin-top: var.$gutter-base;
+      height: auto;
+    }
+    .col-33 {
+      height: calc(50% - 90px);
+      @include mix.laptop-lg-styles {
+        height: calc(50% - 60px);
+      }
+      .services__cards--card {
+        padding: math.div(var.$gutter-base, 2);
+        margin-right: (var.$gutter-base * 1.5);
+        margin-bottom: (var.$gutter-base * 3);
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        // border: 1px solid lightgray;
+        box-shadow: 3px 3px 5px lightgrey, -3px -3px 5px lightgrey;
+        @include mix.laptop-lg-styles {
+          margin-right: var.$gutter-base;
+          margin-bottom: (var.$gutter-base * 2);
+        }
+        @include mix.tablet-styles {
+          padding: math.div(var.$gutter-base, 3);
+          margin-right: math.div(var.$gutter-base, 2);
+        }
+        @include mix.mobile-l-styles {
+          margin-right: 0;
+        }
+        p {
+          font-size: var.$font-size-medium;
+          margin-bottom: 0;
+          height: 20%;
+          @include mix.laptop-lg-styles {
+            font-size: var.$font-size-base;
+          }
+          @include mix.tablet-styles {
+            font-size: var.$font-size-small;
+          }
+        }
+        img {
+          height: 60%;
+          margin-bottom: math.div(var.$gutter-base, 3);
+        }
+
+        h4 {
+          font-size: var.$heading-size-small;
+          height: 20%;
+          margin-bottom: math.div(var.$gutter-base, 3);
+          @include mix.laptop-lg-styles {
+            font-size: var.$heading-size-tiny;
+          }
+          @include mix.tablet-styles {
+            margin-bottom: 0;
+            font-size: var.$font-size-base;
+          }
+        }
+      }
+    }
+  }
+}

development/css/core/_common-elements.scss

@@ -13,7 +13,6 @@ body {
 }
 
 h1 {
-  text-transform: uppercase;
   font-size: var.$heading-size-bigger;
   @include mix.laptop-lg-styles {
     font-size: var.$heading-size-big;
@@ -26,11 +25,35 @@ h1 {
   }
 }
 
-// h2 {}
+h1,
+h2,
+h3,
+h4 {
+  text-transform: uppercase;
+}
 
-// h3 {}
+h2 {
+  margin-bottom: (var.$gutter-base * 3);
+  font-size: var.$heading-size-big;
+  @include mix.laptop-lg-styles {
+    font-size: var.$heading-size-small;
+    margin-bottom: (var.$gutter-base * 2);
+  }
+  @include mix.mobile-l-styles {
+    margin-bottom: var.$gutter-base;
+    font-size: var.$heading-size-tiny;
+  }
+}
 
-// p {}
+h3 {
+  font-size: var.$heading-size-big;
+  @include mix.laptop-lg-styles {
+    font-size: var.$heading-size-small;
+  }
+  @include mix.mobile-l-styles {
+    font-size: var.$heading-size-tiny;
+  }
+}
 
 .btn {
   text-decoration: none;
@@ -50,3 +73,17 @@ h1 {
     padding: math.div(var.$gutter-base, 3) (var.$gutter-base * 1.3);
   }
 }
+
+.col-50 {
+  flex-basis: 50%;
+  @include mix.mobile-l-styles {
+    flex-basis: 100%;
+  }
+}
+
+.col-33 {
+  flex-basis: 33.33%;
+  @include mix.mobile-l-styles {
+    flex-basis: 100%;
+  }
+}

development/css/core/_reboot.scss

@@ -20,4 +20,4 @@ ol {
 
 img {
   max-width: 100%;
-}
\ No newline at end of file
+}

development/css/main.css

@@ -23,6 +23,45 @@ img {
   max-width: 100%;
 }
 
+.services {
+  padding-top: 3.75rem;
+  padding-bottom: 3.75rem;
+}
+@media (max-width: 425px) {
+  .services {
+    padding-top: 1.875rem;
+    padding-bottom: 1.875rem;
+  }
+}
+
+.services {
+  width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+}
+@media (max-width: 1920px) {
+  .services {
+    width: 70%;
+  }
+}
+@media (max-width: 1536px) {
+  .services {
+    width: 80%;
+  }
+}
+@media (max-width: 1440px) {
+  .services {
+    width: 90%;
+  }
+}
+@media (max-width: 768px) {
+  .services {
+    width: 100%;
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
 html {
   font-size: 16px;
 }
@@ -31,12 +70,9 @@ body {
   font-family: "Roboto", sans-serif;
   font-weight: 400;
   line-height: 1.5;
-<<<<<<< HEAD
-=======
 }
 
 h1 {
-  text-transform: uppercase;
   font-size: 3.125rem;
 }
 @media (max-width: 1536px) {
@@ -55,6 +91,44 @@ h1 {
   }
 }
 
+h1,
+h2,
+h3,
+h4 {
+  text-transform: uppercase;
+}
+
+h2 {
+  margin-bottom: 5.625rem;
+  font-size: 2.0625rem;
+}
+@media (max-width: 1536px) {
+  h2 {
+    font-size: 1.75rem;
+    margin-bottom: 3.75rem;
+  }
+}
+@media (max-width: 425px) {
+  h2 {
+    margin-bottom: 1.875rem;
+    font-size: 1.25rem;
+  }
+}
+
+h3 {
+  font-size: 2.0625rem;
+}
+@media (max-width: 1536px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+@media (max-width: 425px) {
+  h3 {
+    font-size: 1.25rem;
+  }
+}
+
 .btn {
   text-decoration: none;
   color: inherit;
@@ -78,6 +152,24 @@ h1 {
   }
 }
 
+.col-50 {
+  flex-basis: 50%;
+}
+@media (max-width: 425px) {
+  .col-50 {
+    flex-basis: 100%;
+  }
+}
+
+.col-33 {
+  flex-basis: 33.33%;
+}
+@media (max-width: 425px) {
+  .col-33 {
+    flex-basis: 100%;
+  }
+}
+
 header {
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../Assets/Pictures/HeroSection-Background/360_F_380249159_rvDYzhjR8eCnnzFnVKPYNptNVkejba7J.jpg");
   background-size: cover;
@@ -106,5 +198,165 @@ header .banner p {
   header .banner p {
     font-size: 0.8125rem;
   }
->>>>>>> banner
+}
+
+.services {
+  text-align: center;
+}
+.services .services__about {
+  display: flex;
+  align-items: center;
+}
+@media (max-width: 425px) {
+  .services .services__about {
+    flex-wrap: wrap;
+  }
+}
+.services .services__about .col-50 {
+  padding-left: 1.875rem;
+  padding-right: 1.875rem;
+}
+@media (max-width: 1536px) {
+  .services .services__about .col-50 {
+    padding-left: 6.1875rem;
+    padding-right: 6.1875rem;
+  }
+}
+@media (max-width: 1024px) {
+  .services .services__about .col-50 {
+    padding-left: 4.6875rem;
+    padding-right: 4.6875rem;
+  }
+}
+@media (max-width: 768px) {
+  .services .services__about .col-50 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+}
+@media (max-width: 425px) {
+  .services .services__about .col-50 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+.services .services__about .col-50 img {
+  width: 400px;
+}
+@media (max-width: 1536px) {
+  .services .services__about .col-50 img {
+    width: 300px;
+  }
+}
+.services .services__about .col-50 p {
+  text-align: justify;
+  margin-bottom: 0;
+  font-size: 1.5625rem;
+}
+@media (max-width: 1536px) {
+  .services .services__about .col-50 p {
+    font-size: 1.125rem;
+  }
+}
+.services .services__cards {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 5.625rem;
+  margin-right: -2.8125rem;
+  height: 70vh;
+}
+@media (max-width: 1920px) {
+  .services .services__cards {
+    height: 100vh;
+  }
+}
+@media (max-width: 1536px) {
+  .services .services__cards {
+    margin-right: -1.875rem;
+    margin-top: 3.75rem;
+    height: 120vh;
+  }
+}
+@media (max-width: 768px) {
+  .services .services__cards {
+    margin-right: -0.9375rem;
+  }
+}
+@media (max-width: 425px) {
+  .services .services__cards {
+    margin-right: 0;
+    margin-top: 1.875rem;
+    height: auto;
+  }
+}
+.services .services__cards .col-33 {
+  height: calc(50% - 90px);
+}
+@media (max-width: 1536px) {
+  .services .services__cards .col-33 {
+    height: calc(50% - 60px);
+  }
+}
+.services .services__cards .col-33 .services__cards--card {
+  padding: 0.9375rem;
+  margin-right: 2.8125rem;
+  margin-bottom: 5.625rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 3px 3px 5px lightgrey, -3px -3px 5px lightgrey;
+}
+@media (max-width: 1536px) {
+  .services .services__cards .col-33 .services__cards--card {
+    margin-right: 1.875rem;
+    margin-bottom: 3.75rem;
+  }
+}
+@media (max-width: 768px) {
+  .services .services__cards .col-33 .services__cards--card {
+    padding: 0.625rem;
+    margin-right: 0.9375rem;
+  }
+}
+@media (max-width: 425px) {
+  .services .services__cards .col-33 .services__cards--card {
+    margin-right: 0;
+  }
+}
+.services .services__cards .col-33 .services__cards--card p {
+  font-size: 1.125rem;
+  margin-bottom: 0;
+  height: 20%;
+}
+@media (max-width: 1536px) {
+  .services .services__cards .col-33 .services__cards--card p {
+    font-size: 1rem;
+  }
+}
+@media (max-width: 768px) {
+  .services .services__cards .col-33 .services__cards--card p {
+    font-size: 0.8125rem;
+  }
+}
+.services .services__cards .col-33 .services__cards--card img {
+  height: 60%;
+  margin-bottom: 0.625rem;
+}
+.services .services__cards .col-33 .services__cards--card h4 {
+  font-size: 1.75rem;
+  height: 20%;
+  margin-bottom: 0.625rem;
+}
+@media (max-width: 1536px) {
+  .services .services__cards .col-33 .services__cards--card h4 {
+    font-size: 1.25rem;
+  }
+}
+@media (max-width: 768px) {
+  .services .services__cards .col-33 .services__cards--card h4 {
+    margin-bottom: 0;
+    font-size: 1rem;
+  }
 }/*# sourceMappingURL=main.css.map */
\ No newline at end of file

development/css/main.css.map

-<<<<<<< HEAD
-{"version":3,"sources":["core/_custom-font.scss","core/_reboot.scss","main.css","core/_common-elements.scss","abstracts/_variables.scss"],"names":[],"mappings":"AACQ,6JAAA;ACDR;EACE,sBAAA;ACEF;;ADCA;EACE,SAAA;ACEF;;ADCA;;;;;;;;;EASE,aAAA;ACEF;;ADCA;EACE,eAAA;ACEF;;ACnBA;EACE,eAAA;ADsBF;;ACnBA;EACE,iCCFiB;EDGjB,gBCWmB;EDVnB,gBCOiB;AFenB","file":"main.css"}
-=======
-{"version":3,"sources":["core/_custom-font.scss","core/_reboot.scss","main.css","core/_common-elements.scss","abstracts/_variables.scss","abstracts/_mixins.scss","components/_banner.scss"],"names":[],"mappings":"AACQ,6JAAA;ACDR;EACE,sBAAA;ACEF;;ADCA;EACE,SAAA;ACEF;;ADCA;;;;;;;;;EASE,aAAA;ACEF;;ADCA;EACE,eAAA;ACEF;;ACnBA;EACE,eAAA;ADsBF;;ACnBA;EACE,iCCFiB;EDGjB,gBCYmB;EDXnB,gBCQiB;AFcnB;;ACnBA;EACE,yBAAA;EACA,mBCCoB;AFqBtB;AGrBE;EFHF;IAII,oBCFe;EF0BjB;AACF;AGdE;EFfF;IAOI,kBCNiB;EFgCnB;AACF;AGPE;EF3BF;IAUI,kBCVgB;EFsClB;AACF;;ACnBA;EACE,qBAAA;EACA,cAAA;EACA,qBAAA;EACA,sBCHyB;EDIzB,oBC3Bc;ED4Bd,gBCjBiB;EDkBjB,mBAAA;EACA,0BAAA;ADsBF;AG/CE;EFiBF;IAUI,mBCjCe;IDkCf,4BAAA;EDwBF;AACF;AGzCE;EFKF;IAcI,oBCvCc;IDwCd,2BAAA;ED0BF;AACF;;AIxEA;EACE,gLAAA;EAEA,sBAAA;EACA,2BAAA;EACA,aAAA;EACA,WFqBmB;EEpBnB,kBAAA;AJ0EF;AIzEE;EACE,kBAAA;EACA,QAAA;EACA,QAAA;EACA,2BAAA;AJ2EJ;AI1EI;EACE,oBFNU;EEOV,uBAAA;AJ4EN;AG9EE;ECAE;IAII,mBFVW;IEWX,uBAAA;EJ8EN;AACF;AGxEE;ECZE;IAQI,oBFhBU;EFgGhB;AACF","file":"main.css"}
->>>>>>> banner
+{"version":3,"sources":["core/_custom-font.scss","core/_reboot.scss","main.css","abstracts/_mixins.scss","abstracts/_variables.scss","core/_common-elements.scss","components/_banner.scss","components/_services.scss"],"names":[],"mappings":"AACQ,6JAAA;ACDR;EACE,sBAAA;ACEF;;ADCA;EACE,SAAA;ACEF;;ADCA;;;;;;;;;EASE,aAAA;ACEF;;ADCA;EACE,eAAA;ACEF;;ACmCA;EACE,oBAAA;EACA,uBAAA;ADhCF;ACaE;EAiBF;IAKI,qBAAA;IACA,wBAAA;ED/BF;AACF;;ACkCA;EACE,UAAA;EACA,iBAAA;EACA,kBAAA;AD/BF;AC7BE;EAyDF;IAMI,UAAA;ED9BF;AACF;AC5BE;EAmDF;IAUI,UAAA;ED7BF;AACF;AC3BE;EA6CF;IAcI,UAAA;ED5BF;AACF;ACpBE;EAiCF;IAkBI,WAAA;IACA,sBC5DU;ID6DV,uBC7DU;EFkCZ;AACF;;AG1DA;EACE,eAAA;AH6DF;;AG1DA;EACE,iCDFiB;ECGjB,gBDYmB;ECXnB,gBDQiB;AFqDnB;;AG1DA;EACE,mBDEoB;AF2DtB;AC3DE;EEHF;IAGI,oBDDe;EFgEjB;AACF;ACpDE;EEfF;IAMI,kBDLiB;EFsEnB;AACF;AC7CE;EE3BF;IASI,kBDTgB;EF4ElB;AACF;;AGhEA;;;;EAIE,yBAAA;AHmEF;;AGhEA;EACE,uBAAA;EACA,oBDpBiB;AFuFnB;ACtFE;EEiBF;IAII,kBDvBiB;ICwBjB,sBAAA;EHqEF;AACF;ACpEE;EEPF;IAQI,uBDfU;ICgBV,kBD7BgB;EFoGlB;AACF;;AGpEA;EACE,oBDhCiB;AFuGnB;ACtGE;EE8BF;IAGI,kBDnCiB;EF4GnB;AACF;ACnFE;EEMF;IAMI,kBDvCgB;EFkHlB;AACF;;AGxEA;EACE,qBAAA;EACA,cAAA;EACA,qBAAA;EACA,sBD1ByB;EC2BzB,oBDlDc;ECmDd,gBDxCiB;ECyCjB,mBAAA;EACA,0BAAA;AH2EF;AC3HE;EEwCF;IAUI,mBDxDe;ICyDf,4BAAA;EH6EF;AACF;ACrHE;EE4BF;IAcI,oBD9Dc;IC+Dd,2BAAA;EH+EF;AACF;;AG5EA;EACE,eAAA;AH+EF;ACnHE;EEmCF;IAGI,gBAAA;EHiFF;AACF;;AG9EA;EACE,kBAAA;AHiFF;AC5HE;EE0CF;IAGI,gBAAA;EHmFF;AACF;;AItKA;EACE,gLAAA;EAEA,sBAAA;EACA,2BAAA;EACA,aAAA;EACA,WFqBmB;EEpBnB,kBAAA;AJwKF;AIvKE;EACE,kBAAA;EACA,QAAA;EACA,QAAA;EACA,2BAAA;AJyKJ;AIxKI;EACE,oBFNU;EEOV,uBAAA;AJ0KN;AC5KE;EGAE;IAII,mBFVW;IEWX,uBAAA;EJ4KN;AACF;ACtKE;EGZE;IAQI,oBFhBU;EF8LhB;AACF;;AKpMA;EAGE,kBAAA;ALqMF;AKpME;EACE,aAAA;EACA,mBAAA;ALsMJ;ACvKE;EIjCA;IAII,eAAA;ELwMJ;AACF;AKvMI;EACE,sBHYQ;EGXR,uBHWQ;AF8Ld;ACxME;EIHE;IAII,uBAAA;IACA,wBAAA;EL2MN;AACF;AClME;EIfE;IAQI,uBAAA;IACA,wBAAA;EL6MN;AACF;AClME;EIrBE;IAYI,qBAAA;IACA,sBAAA;EL+MN;AACF;AClME;EI3BE;IAgBI,eAAA;IACA,gBAAA;ELiNN;AACF;AK/MM;EACE,YAAA;ALiNR;ACnOE;EIiBI;IAGI,YAAA;ELmNR;AACF;AKjNM;EACE,mBAAA;EACA,gBAAA;EACA,oBH/BQ;AFkPhB;AC7OE;EIuBI;IAKI,mBHlCS;EFuPjB;AACF;AKjNE;EACE,aAAA;EACA,eAAA;EACA,oBAAA;EACA,wBAAA;EACA,YAAA;ALmNJ;AC/PE;EIuCA;IAOI,aAAA;ELqNJ;AACF;AC9PE;EIiCA;IAUI,uBAAA;IACA,mBAAA;IACA,aAAA;ELuNJ;AACF;ACnPE;EIeA;IAeI,wBAAA;ELyNJ;AACF;AClPE;EISA;IAkBI,eAAA;IACA,oBH1CQ;IG2CR,YAAA;EL2NJ;AACF;AK1NI;EACE,wBAAA;AL4NN;ACpRE;EIuDE;IAGI,wBAAA;EL8NN;AACF;AK7NM;EACE,kBAAA;EACA,uBAAA;EACA,uBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EAEA,0DAAA;AL8NR;ACpSE;EI4DI;IAYI,sBH9DI;IG+DJ,sBAAA;ELgOR;AACF;ACxRE;EI0CI;IAgBI,iBAAA;IACA,uBAAA;ELkOR;AACF;ACxRE;EIoCI;IAoBI,eAAA;ELoOR;AACF;AKnOQ;EACE,mBHzFS;EG0FT,gBAAA;EACA,WAAA;ALqOV;AC1TE;EIkFM;IAKI,eH9FK;EFqUf;AACF;AC7SE;EIgEM;IAQI,oBHlGM;EF2UhB;AACF;AKvOQ;EACE,WAAA;EACA,uBAAA;ALyOV;AKtOQ;EACE,kBHrGW;EGsGX,WAAA;EACA,uBAAA;ALwOV;AC7UE;EIkGM;IAKI,kBH1GQ;EFoVlB;AACF;AChUE;EIgFM;IAQI,gBAAA;IACA,eHlHK;EF8Vf;AACF","file":"main.css"}
\ No newline at end of file

development/index.html

@@ -14,6 +14,7 @@
 </head>
 
 <body>
+    <!-- Banner Section -->
     <header>
         <div class="banner">
             <h1>we connect your company<br>to a world of opportunities</h1>
@@ -22,6 +23,68 @@
             <a href="#" class="btn">Talk to an expert</a>
         </div>
     </header>
+    <!-- Services Section -->
+    <section class="services">
+        <h2>we provide first-class service</h2>
+        <div class="services__about">
+            <div class="col-50">
+                <img src="./Assets/Pictures/Mission-Vision-Pictures/7809433-1536x1536.jpg" alt="about-img">
+            </div>
+            <div class="col-50">
+                <h3>who we are</h3>
+                <p>SKP Company, formed by two industry experts, is named after the Skopje airport code. We specialize in
+                    international transport, logistics, and forwarding, focusing on customs representation for import-
+                    export processes. Our main activities involve facilitating communication with state services,
+                    obtaining permits, and handling documentation for shipped goods.</p>
+            </div>
+        </div>
+        <div class="services__cards">
+            <div class="col-33">
+                <div class="services__cards--card">
+                    <h4>overland</h4>
+                    <img src="./Assets/Pictures/Service Pictures/8615007-1-1536x1024.jpg" alt="service1">
+                    <p>Local, national and international distances - always on time</p>
+                </div>
+            </div>
+            <div class="col-33">
+                <div class="services__cards--card">
+                    <h4>air freight</h4>
+                    <img src="./Assets/Pictures/Service Pictures/7302016-1024x683.jpg" alt="service2">
+                    <p>When time and speed matter most - better and faster</p>
+                </div>
+            </div>
+            <div class="col-33">
+                <div class="services__cards--card">
+                    <h4>sea freight</h4>
+                    <img src="./Assets/Pictures/Service Pictures/5889673-1536x1024.jpg" alt="service3">
+                    <p>When cost matters and time is not an issue - simple, reliable and efficient</p>
+                </div>
+            </div>
+            <div class="col-33">
+                <div class="services__cards--card">
+                    <h4>rail freight</h4>
+                    <img src="./Assets/Pictures/Service Pictures/5363943-1536x1024.jpg" alt="service4">
+                    <p>The greener alternative - secure, fast, stable, and punctual</p>
+                </div>
+            </div>
+            <div class="col-33">
+                <div class="services__cards--card">
+                    <h4>custom clearance assistance</h4>
+                    <img src="./Assets/Pictures/Service Pictures/4351373-1536x1536.jpg" alt="service5">
+                    <p>Preparation of customs documentation, permits and certificates</p>
+                </div>
+            </div>
+            <div class="col-33">
+                <div class="services__cards--card">
+                    <h4>import & export</h4>
+                    <img src="./Assets/Pictures/Service Pictures/5215745-1024x1024.jpg" alt="service6">
+                    <p>We ship your goods as if they were our own</p>
+                </div>
+            </div>
+        </div>
+        <h2>not sure which solution fits your business needs?</h2>
+        <a href="#" class="btn">Talk to an expert</a>
+    </section>
 </body>
 
 </html>
\ No newline at end of file