@import url("https://fonts.googleapis.com/css2?family=Buda:wght@300&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Hat+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Shantell+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,500;1,600;1,700;1,800&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    min-width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    position: relative;
    /* background: #333; */
    overflow-x: hidden;
}

/* Start of navbar */
.navbar {
    @apply flex justify-between flex-row py-2 w-4/5 mx-auto max-laptop-l:py-1 max-laptop-l:w-11/12;
}

.navbar-wrapper {
    @apply flex justify-between flex-row w-full h-auto absolute top-0 left-0 right-0 z-40;
}

.navbar-wrapper {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(5px);
}

.nav-left-part,
.nav-right-part {
    font-family: "Red Hat Mono", monospace;
}

.nav-left-part h1 {
    @apply text-3xl font-medium;
}

.nav-right-part {
    @apply flex items-center flex-row;
}

.nav-right-part ul {
    @apply flex justify-center flex-row;
}

.nav-right-part ul li {
    @apply mr-8 transition tracking-wider leading-5 text-white max-laptop-l:mr-6 max-laptop-l:tracking-wide max-laptop-l:leading-3;
}

.nav-right-part ul li:hover {
    @apply underline;
}
/* End of navbar */

/* Start of hero section */
.hero-section {
    @apply flex flex-col justify-center items-center min-w-full mx-auto min-h-[90vh] h-screen max-laptop-l:min-h-[80vh] max-laptop-l:h-auto;
}

.hero-section {
    background: url("./assets/img21.jpg") center no-repeat fixed;
    background-size: cover;
}

.hero-title h1 {
    @apply text-7xl font-bold text-right tracking-widest font-poppins text-white w-1/2 float-right  mr-[10%] leading-[85px] max-laptop-l:text-6xl max-laptop-l:leading-[70px] max-laptop-l:mr-[5%] max-laptop-l:w-1/2;
}

.hero-title h1 span {
    -webkit-text-stroke: 1px rgb(255, 255, 255);
    text-stroke: 1px rgb(255, 255, 255);
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* End of hero section */
/* Start of About section */
.about-section {
    @apply flex flex-col justify-center items-center min-w-full mx-auto min-h-[70vh] min-h-screen h-auto max-h-max p-12 relative;
}

.about-section {
    background: url("./assets/img02.jpg") center no-repeat fixed;
    background-size: cover;
    /* background-color:  */
}

.about-section-wrapper {
    @apply w-full h-auto bg-[#0000007d] absolute top-0 left-0 right-0 bottom-0;
}

.about-section-left-part {
    @apply flex flex-col justify-center items-center w-1/2  min-h-[70vh] h-screen mx-[10%] mr-[10%] max-laptop-l:min-h-[60vh];
}

.about-section-text {
    @apply mx-20 p-20 font-normal max-laptop-l:mx-10 max-laptop-l:p-10 max-laptop-l:font-normal;
}

.about-section-left-part p {
    @apply text-lg font-normal text-left tracking-widest font-poppins text-white float-left my-5 leading-[35px] max-laptop-l:text-base max-laptop-l:leading-[25px] max-laptop-l:my-3;
}

.about-section-right-part {
    @apply w-1/2 mr-[10%] ml-[5%] flex justify-center items-center min-h-[70vh] h-auto rounded-lg;
}

.about-section-right-part img {
    @apply w-full h-full rounded-lg;
}

.about-section-2 {
    /* background: url("./assets/img25.jpg") center no-repeat fixed;
    background-size: cover; */
    background-color: #fff;
}

.about-section-2 {
    @apply flex flex-col justify-center items-center min-w-full mx-auto relative max-laptop-l:min-h-[60vh];
}

.about-section-2 p {
    @apply text-lg font-normal text-left tracking-widest font-poppins text-black float-left my-5 leading-[35px] max-laptop-l:text-base max-laptop-l:leading-[25px] max-laptop-l:my-3;
}

.about-section-text {
    @apply float-right;
}

.about-section-text ul {
    @apply flex flex-col justify-center items-center w-full h-auto ml-40;
}

.about-section-text ul li {
    @apply text-lg font-normal text-left tracking-widest font-poppins text-white float-left my-5 leading-[35px] list-disc max-laptop-l:text-base max-laptop-l:leading-[25px] max-laptop-l:my-3;
}

.about-section-2 {
    @apply p-10 max-laptop-l:p-5;
}

.about-section-2 h1 {
    @apply text-7xl font-bold text-left tracking-widest font-poppins text-[#333] text-center float-left  leading-[85px] max-laptop-l:text-6xl max-laptop-l:leading-[70px] max-laptop-l:mr-[5%] max-laptop-l:w-1/2;
}

.about-cards-container {
    @apply flex flex-row justify-center items-center w-full h-auto flex-wrap ;
}

.about-card {
    @apply flex flex-col justify-center items-center w-1/4 mx-10 my-10 bg-[#0ea47a] p-5 rounded-md min-h-[350px] min-w-[300px] max-laptop-l:w-1/2 max-laptop-l:min-h-[300px] max-laptop-l:min-w-[250px] max-laptop-l:mx-5 max-laptop-l:my-5;
}

.about-section-2 h1 {
    font-family: "Buda", cursive;
}

.about-card h2 {
    @apply text-2xl font-bold text-center tracking-widest font-poppins text-white float-left;
}

.about-card p {
    @apply font-normal text-base text-white text-center leading-7;
}
/* End of About section */
/* Start of IoT section */
.iot-cards-wrapper {
    @apply flex flex-row flex-wrap justify-center items-center min-w-full mx-auto;
}

.iot-card {
    @apply flex flex-col items-center w-1/4 mx-10 my-10 bg-[#0ea47a] rounded-md min-h-[592px] min-w-[300px];
}

.iot-card-title h2 {
    @apply text-2xl font-bold text-center tracking-widest font-poppins text-white float-left mt-4;
}

.iot-card-img {
    @apply flex justify-center items-center w-full h-[228px] overflow-hidden rounded-t-md;
}

.iot-card-img img {
    @apply w-full h-auto rounded-t-md top-0 cursor-pointer transition duration-500;
}

.iot-card img:hover {
    @apply scale-150;
}

.iot-card-text-wrapper {
    @apply flex flex-col justify-center items-center w-full min-h-[364px];
}

.iot-card-title,
.iot-card-text {
    @apply px-5;
}

.iot-card-text p {
    @apply font-normal text-base text-white text-center leading-7 pb-5;
}
/* End of IoT section */
/* Start of footer section */
.footer-section {
    @apply bg-[#111] text-white flex flex-col items-center min-w-full mx-auto h-auto max-h-max p-2;
}

.footer-section-wrapper {
    @apply w-4/5 flex flex-row justify-between items-center mx-auto h-auto max-h-max p-2;
}
/* End of footer section */
/* Start of Basics Hero Section */
.basics__hero-section {
    background: url("./assets/img14.jpg") center no-repeat fixed;
    background-size: cover;
}

.basics__hero-section-color-wrapper {
    @apply flex flex-col justify-center items-center min-w-full mx-auto min-h-[70vh] min-h-screen h-auto max-h-max p-12 relative;
}

/* End of Basics Hero Section */
/* Start of Basics iot evolution section */
.iot_evolution__wrapper {
    @apply flex flex-col justify-center items-center p-12 w-4/5 mx-auto;
}
.iot_evolution__title {
    @apply text-7xl font-bold text-left tracking-widest font-poppins text-[#333] text-center float-left  leading-[85px];
}

.iot_evolution__title {
    font-family: "Buda", cursive;
}

.iot_evolution__text {
    @apply mt-12 text-lg font-normal text-left tracking-widest font-poppins text-[#333] float-left leading-[35px];
}

.iot_evolution__text p {
    @apply my-8;
}

/* End of Basics iot evolution section */
/* Start of Basics advantage disadvantage section */
.advantage-disadvantage-wrapper {
    @apply flex flex-col justify-center items-center p-12 w-4/5 mx-auto;
}

.advantage-disadvantage-title {
    @apply text-7xl font-bold text-left tracking-widest font-poppins text-[#333] text-center float-left  leading-[85px] my-12;
}

.advantage-disadvantage-title {
    font-family: "Buda", cursive;
}

.advantage-disadvantage-text,
.ad-disad-wrapper {
    @apply flex flex-row justify-center items-center w-full h-auto flex-wrap;
}

.ad-disad-card {
    @apply flex flex-col justify-center items-center w-1/4 mx-10 my-10 bg-[#0ea47a] p-5 rounded-md min-h-[350px] min-w-[300px];
}

.ad-disad-card h2 {
    @apply text-2xl font-bold text-center tracking-widest font-poppins text-white float-left mb-5;
}

.ad-disad-card p {
    @apply font-normal text-lg text-white text-center leading-7;
}

/* End of Basics advantage disadvantage section */
/* Start of Basics Application section */
.applications-list-wrapper {
    @apply flex flex-col justify-center  p-12 w-4/5 mx-auto;
}

.applications-list-wrapper li {
    @apply text-lg font-normal text-left tracking-widest font-poppins text-black float-left my-5 leading-[35px] list-disc;
}

/* End of Basics Application section */

/* Start of devices hero section */
.devices__hero-section {
    background: url("./assets/img12.jpg") center no-repeat fixed;
    background-size: cover;
}
/* End of devices hero section */

/* Start of implementation hero section */
.implementation__hero-section {
    background: url("./assets/img10.jpg") center no-repeat fixed;
    background-size: cover;
}
/* End of implementation hero section */

/* Start of resources hero section */
.resources__hero-section {
    background: url("./assets/img24.jpg") center no-repeat fixed;
    background-size: cover;
}
/* End of resources hero section */

/* Start of news hero section */
.news__hero-section {
    background: url("./assets/img22.jpg") center no-repeat fixed;
    background-size: cover;
}
/* End of news hero section */

/* Media Queries */
@media (min-width: 1921px) {
    html {
        @apply w-[1920px] mx-auto;
    }
}

/* @media (max-wdith: 1440px) {
    .navbar{
        @apply py-1 w-11/12;
    }

    .nav-right-part ul li {
        @apply mr-6 transition tracking-wide leading-3 text-red-700;
    }
} */