/*!
Theme Name: Praktan
Theme URI: https://www.praktan.com/
Author: Swati Saini
Author URI: https://www.praktan.com/
Description: Description
Version: 1.0.0

*/

 @import url('https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap');

 * {

     Margin: 0;

     Padding: 0;

     Box-sizing: border-box;

 }

 

 html,

 body {

     Width: 100%;

     Height: 100%;

 }

 

 :root {

     --sora: 'Sora', sans-serif;

 }

 

 h1 h2 h3 h4 h5 h6 a p {

     font-family: var(--sora);

 }

 

 #main {

     width: 100%;

 }

 

 #hero {

     width: 100%;

     height: 100vh;

     position: relative;

     background-color: #F9F9F9;

 }

 

 #bg {

     width: 50%;

     height: 90vh;

 }

 

 #bg img {

     width: 100%;

     height: 100vh;

 }

 

 #header {

     position: absolute;

     top: 0;

     z-index: 1;

     display: flex;

     padding: 60px 40px 0px 40px;

     align-items: center;

     /* padding: 20px 40px; */

     justify-content: space-between;

     /* background-color: red; */

     width: 100%;

     height: 10%;

 }

 

 #navtitle {

     width: max-content;

     display: flex;

     align-items: center;

     justify-content: space-between;

 }

 

 #navtitle img {

     width: 10px;

 }

 

 #navtitle h1 {

     text-transform: capitalize;

     font-size: 2vw;

     font-family: var(--sora);

 }

 

 #link-tree a {

     width: 136.02px;

     height: 36.02px;

     padding: 9px 10px 9px 10px;

     background-color: #222222;

     color: #fff;

     text-decoration: none;

     font-family: var(--sora);

     font-weight: 500;

     transition: all 0.2s ease-in;

 }

 

 #link-tree1 a {

     display: inline-block;

     width: 136.02px;

     height: 36.02px;

     padding: 9px 10px 9px 10px;

     background-color: #222222;

     color: #fff;

     text-decoration: none;

     font-family: var(--sora);

     font-weight: 500;

     transition: all 0.2s ease-in;

 }

 

 #link-tree2 a {

     display: inline-block;

     width: 136.02px;

     height: 36.02px;

     padding: 9px 10px 9px 10px;

     background-color: #222222;

     color: #fff;

     text-decoration: none;

     font-family: var(--sora);

     font-weight: 500;

     transition: all 0.2s ease-in;

 }

 

 #link-tree a:hover {

     background-color: #00A88E;

 }

 

 #link-tree1 a:hover {

     background-color: #00A88E;

 }

 

 #link-tree2 a:hover {

     background-color: #00A88E;

 }

 

 #link-tree img {

     width: 15.01px;

     height: 7.5px;

 }

 

 #heroContent {

     width: 40%;

     position: absolute;

     top: 48%;

     left: 50%;

     transform: translate(-50%, -50%);

 }

 

 #heroContent #content h1 {

     text-align: center;

     color: #222222;

     font-size: 36px;

     line-height: 1.5;

     font-weight: 700;

     font-family: var(--sora);

 }

 

 #content i {

     font-size: 48.2px;

     font-weight: 800;

     color: #00A88E;

 }

 

 #content {

     margin-bottom: 15%;

 }

 

 #content h1 span {

     display: inline-block;

     width: 50px;

     height: 2px;

     border-bottom: 7px solid #00A88E;

 }

 

 #rect {

     position: absolute;

     top: 76%;

     left: 51%;

     width: 92%;

     height: 80px;

     background-color: #00A88E;

 }

 

 #scroller {

     padding: 40px;

     background-color: #00A88E;

     white-space: nowrap;

     overflow-y: hidden;

     overflow-x: auto;

     position: relative;

     z-index: 10;

 }

 

 #scroller::-webkit-scrollbar {

     display: none;

 }

 

 #scroller h4 {

     display: inline-block;

     font-family: var(--sora);

     font-size: 2vw;

     font-weight: 400;

     margin-right: 30px;

     margin-bottom:0px;

     color: #fff;

     transition: all linear 0.4s;

 }

 

 #scroller-in {

     display: inline-block;

     white-space: nowrap;

     animation-name: scroll;

     animation-duration: 10s;

     animation-timing-function: linear;

     animation-iteration-count: infinite;

 }

 

 @keyframes scroll {

     from {

         transform: translateX(0);

     }

     to {

         transform: translateX(-100%);

     }

 }

 

 #contact {

     width: 100%;

     height: 80vh;

     padding: 80px 40px;

 }

 

 #contact h1 {

     font-size: 2.9vw;

     font-family: var(--sora);

     font-weight: 700;

 }

 

 #contactform {

     margin-top: 60px;

     width: 90%;

     height: 100%;

 }

 

 #contactform #row {

     /* background-color: red; */

     width: 100%;

     height: 40px;

     display: flex;

     align-items: center;

     margin-bottom: 60px;

 }

 

 #contactform #row h2 {

     font-size: 2.2vw;

     font-family: var(--sora);

     font-weight: 500;

 }

 

 #contactform #row h4 {

     cursor: pointer;

     margin-left: 20px;

     padding: 20px;

     /* width: 200px; */

     text-align: center;

     border-radius: 100px;

     font-size: 1.5vw;

     font-family: var(--sora);

     font-weight: 300;

     transition: all 0.2s linear;

 }

 

 #row input {

     font-family: var(--sora);

     font-size: 2vw;

     font-weight: 500;

     width: 20%;

     background-color: transparent;

     border: none;

     border-bottom: 3px solid #222222;

 }

 

 #row input:focus {

     outline: none;

 }

 

 #row input:nth-last-child(2) {

     width: 45%;

 }

 

 .Interested {

     /* Define your default styling */

     background-color: #E9E9E9;

     color: #222222;

     /* Add other styles as needed */

 }

 

 .Interested.active {

     /* Define the styling when the button is active/toggled */

     background-color: #222222 !important;

     color: #fff;

     /* Add other styles as needed */

 }

 

 .buttonWidth {

     width: 100%;

     text-align: center;

 }

 

 button:hover {

     background-color: #00A88E;

 }

 

 #footer-in {

     display: flex;

     justify-content: space-between;

     align-items: center;

 }

 

 #footer-in h5 {

     color: #fff;

     font-size: 1.5vw;

     font-weight: 400;

     font-family: var(--sora);

 }

 

 .imges {

     display: flex;

     gap: 20px;

 }

 

 #footer-in img {

     max-width: 26px;

 }

 

 .clicked {

     background-color: lightblue;

 }

 /* @media */

 

 @media only screen and (min-width:666px) and (max-width:3000px) {

     #link-tree2 {

         display: none;

     }

     #contactform1 {

         display: none;

     }

 }

 

 @media only screen and (min-width:100px) and (max-width:666px) {

     #link-tree1 {

         display: none !important;

     }

     #contactform {

         display: none !important;

     }

 }

 

 @media only screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {

     /* Your CSS styles for iPad Pro 11-inch in portrait mode go here */

     #navtitle img {

         width: 15px;

     }

     #navtitle h1 {

         font-size: 4vw;

     }

     #link-tree {

         display: none;

     }

     #hidden-div {

         display: none;

     }

     #header {

         justify-content: center;

     }

     #heroContent {

         top: 42%;

         width: 75%;

     }

     #content i {

         font-size: 70px;

     }

     #heroContent #content h1 {

         font-size: 35px;

     }

     #rect {

         top: 120%;

         width: 59%;

     }

     #scroller {

         position: relative;

         top: 2%;

     }

     #contact h1 {

         font-size: 4.5vw;

         font-weight: 500;

     }

     #contactform #row {

         margin-bottom: 20px;

     }

     #contactform #row h2 {

         font-size: 2.5vw;

     }

     #contactform #row h4 {

         font-weight: 600;

         padding: 15px 20px;

     }

     #contactform {

         width: 100%;

     }

     button {

         font-size: 2.5vw;

         margin-top: 30px;

     }

     #link-tree1 {

         display: flex;

         align-items: center;

         justify-content: center;

     }

     #link-tree1 a {

         font-size: 2vw;

         padding: 15px 10px 13px 19px;

         width: 140px;

         height: 52px;

     }

     #link-tree1 img {

         width: 15.01px;

         height: 8.5px;

         object-fit: cover;

     }

     #contact {

         height: 45vh;

     }

     #footer-in h5 {

         font-size: 3.2vw;

     }

 }

 

 @media only screen and (min-width: 834px) {

     /* Your CSS styles for desktop go here */

     #link-tree1 {

         display: none;

     }

 }

 

 @media only screen and (max-width: 834px) {

     /* Your CSS styles for desktop go here */

     #navtitle img {

         width: 15px;

     }

     #navtitle h1 {

         font-size: 4vw;

     }

     #link-tree {

         display: none;

     }

     #hidden-div {

         display: none;

     }

     #header {

         justify-content: center;

     }

     #heroContent {

         top: 42%;

         width: 75%;

     }

     #content i {

         font-size: 70px;

     }

     #heroContent #content h1 {

         font-size: 35px;

     }

     #rect {

         top: 120%;

         width: 59%;

     }

     #scroller {

         position: relative;

         top: 2%;

     }

     #contact h1 {

         font-size: 4.5vw;

         font-weight: 500;

     }

     #contactform #row {

         margin-bottom: 20px;

     }

     #contactform #row h2 {

         font-size: 2.5vw;

     }

     #contactform #row h4 {

         font-weight: 600;

         padding: 15px 20px;

     }

     #contactform {

         width: 100%;

     }

     button {

         font-size: 2.5vw;

         margin-left: 0;

     }

     #link-tree1 {

         display: flex;

         align-items: center;

         justify-content: center;

     }

     #link-tree1 a {

         font-size: 2vw;

         padding: 15px 10px 13px 19px;

         width: 140px;

         height: 52px;

     }

     #link-tree1 img {

         width: 15.01px;

         height: 8.5px;

         object-fit: cover;

     }

     #contact {

         height: 45vh;

     }

     #footer-in h5 {

         font-size: 3.2vw;

     }

 }

 

 @media only screen and (min-width:100px) and (max-width:666px) {

     #link-tree2 {

         display: block;

         width: 100%;

         height: 100px;

     }

     #link-tree2 a {

         text-align: center;

         padding: 42px 10px 37px 10px;

         height: 100%;

         width: 100%;

         font-weight: 400;

     }

     #navtitle {

         margin-top: 30px;

     }

     #link-tree2 a img {

         width: 25px;

     }

     #header {

         height: auto;

         padding: 0;

         flex-direction: column;

     }

     #navtitle h1 {

         font-size: 6.8vw !important;

         font-weight: 900;

     }

     #content i {

         font-style: normal;

         color: #222222;

         font-weight: 700;

         font-size: 8.5vw !important;

     }

     #content h1 {

         font-size: 8.5vw !important;

     }

     #content {

         padding: 5px;

     }

     #heroContent {

         width: 100% !important;

     }

     #content h1 span {

         border-bottom: 7px solid #222222;

     }

     #rect {

         top: 115% !important;

         width: 48% !important;

     }

     #contact h1 {

         text-align: center;

         font-size: 6vw;

         font-weight: 900;

     }

     #contact {

         height: 72vh;

         padding: 80px 20px;

     }

     #contactform1 {

         margin-top: 60px;

         width: 100%;

         height: 100%;

     }

     #contactform1 #row {

         /* background-color: red; */

         width: 100%;

         height: 40px;

         display: flex;

         align-items: center;

     }

     #contactform1 #row h2 {

         font-size: 5vw;

         font-family: var(--sora);

         font-weight: 500;

     }

     #contactform1 #row h4 {

         cursor: pointer;

         margin-left: 20px;

         /* width: 200px; */

         text-align: center;

         border-radius: 100px;

         font-size: 1.5vw;

         font-family: var(--sora);

         font-weight: 300;

         transition: all 0.2s linear;

     }

     .mobilecontact {

         width: 100%;

         display: flex;

         justify-content: unset;

     }

     .mobilecontact input {

         font-size: 5vw !important;

     }

     #scroller h4 {

         font-size: 7vw;

     }

     #footer-in img {

         max-width: 20px;

     }

 }