@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');



*{
    
    margin:0; 
	padding:0;
    box-sizing: border-box;   
 
}
   

:root{
	--primary-color: #047aed;
	--secondary-color: #1c3fa8;
	--dark-color: #396afc;
	--light-color: #f4f4f4;
	--success-color: #5cb85c;
	--error-color: #d9534f;
	--orange:#ff7800;
    --black:#130f40;
	--pure :#eee;
	--cyan-bluish-gray:#abb8c3;
	--white:#fff;
	--pale-pink:#f78da7;
	--vivid-red:#cf2e2e;
	--luminous-vivid-orange:#ff6900;
	--luminous-vivid-amber:#fcb900;
	--light-green-cyan:#7bdcb5;
	--vivid-green-cyan:#00d084;
	--pale-cyan-blue:#8ed1fc;
	--vivid-cyan-blue:#0693e3;
	--vivid-purple:#9b51e0;
	--colors-whiteAlpha-50:rgba(255, 255, 255, 0.04);
	 --colors-whiteAlpha-100:rgba(255, 255, 255, 0.06);
	 --colors-whiteAlpha-200:rgba(255, 255, 255, 0.08);
	 --colors-whiteAlpha-300:rgba(255, 255, 255, 0.16);
	 --colors-whiteAlpha-400:rgba(255, 255, 255, 0.24);
	 --colors-whiteAlpha-500:rgba(255, 255, 255, 0.36);
	 --colors-whiteAlpha-600:rgba(255, 255, 255, 0.48);
	 --colors-whiteAlpha-700:rgba(255, 255, 255, 0.64);
	 --colors-whiteAlpha-800:rgba(255, 255, 255, 0.80);
	 --colors-whiteAlpha-900:rgba(255, 255, 255, 0.92);
	 --colors-blackAlpha-50:rgba(0, 0, 0, 0.04);
	 --colors-blackAlpha-100:rgba(0, 0, 0, 0.06);
	 --colors-blackAlpha-200:rgba(0, 0, 0, 0.08);
	 --colors-blackAlpha-300:rgba(0, 0, 0, 0.16);
	 --colors-blackAlpha-400:rgba(0, 0, 0, 0.24);
	 --colors-blackAlpha-500:rgba(0, 0, 0, 0.36);
	 --colors-blackAlpha-600:rgba(0, 0, 0, 0.48);
	 --colors-blackAlpha-700:rgba(0, 0, 0, 0.64);
	 --colors-blackAlpha-800:rgba(0, 0, 0, 0.80);
	 --colors-blackAlpha-900:rgba(0, 0, 0, 0.92);
	 --colors-gray-50:#F4F5F8;
	 --colors-gray-100:#EDF2F7;
	 --colors-gray-200:#ECF0F5;
	 --colors-gray-300:#d8e0e8;
	 --colors-gray-400:#9FAFC8;
	 --colors-gray-500:#607698;
	 --colors-gray-600:#4A5568;
	 --colors-gray-700:#2D3748;
	 --colors-gray-800:#192C49;
	 --colors-gray-900:#13223A;
	 --colors-red-50:#FFF5F5;
	 --colors-red-100:hsl(0,100%,95%);
	 --colors-red-200:hsl(10,100%,91%);
	 --colors-red-300:hsl(0,87%,77%);
	 --colors-red-400:#F56565;
	 --colors-red-500:hsl(0,84%,64%);
	 --colors-red-600:#C53030;
	 --colors-red-700:#9B2C2C;
	 --colors-red-800:#822727;
	 --colors-red-900:hsl(0,60%,33%);
	 --colors-orange-50:#FFFAF0;
	 --colors-orange-100:hsl(24,84%,93%);
	 --colors-orange-200:hsl(29,100%,85%);
	 --colors-orange-300:hsl(24,100%,71%);
	 --colors-orange-400:#ED8936;
	 --colors-orange-500:hsl(24,100%,62%);
	 --colors-orange-600:#C05621;
	 --colors-orange-700:#9C4221;
	 --colors-orange-800:#7B341E;
	 --colors-orange-900:hsl(11,65%,25%);
	 --colors-yellow-50:#FFFFF0;
	 --colors-yellow-100:hsl(40,100%,89%);
	 --colors-yellow-200:hsl(40,100%,80%);
	 --colors-yellow-300:hsl(40,100%,64%);
	 --colors-yellow-400:#ECC94B;
	 --colors-yellow-500:hsl(40,100%,52%);
	 --colors-yellow-600:#B7791F;
	 --colors-yellow-700:#975A16;
	 --colors-yellow-800:#744210;
	 --colors-yellow-900:hsl(39,100%,17%);
	 --colors-green-50:#F0FFF4;
	 --colors-green-100:hsl(126,80%,90%);
	 --colors-green-200:hsl(126,71%,76%);
	 --colors-green-300:hsl(140,66%,66%);
	 --colors-green-400:#48BB78;
	 --colors-green-500:hsl(140,54%,50%);
	 --colors-green-600:#2F855A;
	 --colors-green-700:#276749;
	 --colors-green-800:#22543D;
	 --colors-green-900:hsl(140,53%,21%);
	 --colors-teal-50:#E6FFFA;
	 --colors-teal-100:hsl(177,48%,91%);
	 --colors-teal-200:hsl(180,67%,84%);
	 --colors-teal-300:hsl(180,70%,52%);
	 --colors-teal-400:#38B2AC;
	 --colors-teal-500:hsl(176,84%,41%);
	 --colors-teal-600:#2C7A7B;
	 --colors-teal-700:#285E61;
	 --colors-teal-800:#234E52;
	 --colors-teal-900:hsl(197,100%,14%);
	 --colors-blue-50:#ebf8ff;
	 --colors-blue-100:hsl(205,80%,91%);
	 --colors-blue-200:hsl(205,90%,85%);
	 --colors-blue-300:hsl(220,90%,76%);
	 --colors-blue-400:#4299e1;
	 --colors-blue-500:hsl(220,82%,65%);
	 --colors-blue-600:#2b6cb0;
	 --colors-blue-700:#2c5282;
	 --colors-blue-800:#2a4365;
	 --colors-blue-900:hsl(220,62%,24%);
	 --colors-cyan-50:#EDFDFD;
	 --colors-cyan-100:#C4F1F9;
	 --colors-cyan-200:#9DECF9;
	 --colors-cyan-300:#76E4F7;
	 --colors-cyan-400:#0BC5EA;
	 --colors-cyan-500:#00B5D8;
	 --colors-cyan-600:#00A3C4;
	 --colors-cyan-700:#0987A0;
	 --colors-cyan-800:#086F83;
	 --colors-cyan-900:#065666;
	 --colors-purple-50:#FAF5FF;
	 --colors-purple-100:hsl(281,50%,94%);
	 --colors-purple-200:hsl(281,60%,87%);
	 --colors-purple-300:hsl(281,55%,69%);
	 --colors-purple-400:#9F7AEA;
	 --colors-purple-500:hsl(281,35%,51%);
	 --colors-purple-600:#6B46C1;
	 --colors-purple-700:#553C9A;
	 --colors-purple-800:#44337A;
	 --colors-purple-900:hsl(281,58%,25%);
	 --colors-pink-50:#FFF5F7;
	 --colors-pink-100:hsl(332,100%,95%);
	 --colors-pink-200:hsl(331,100%,90%);
	 --colors-pink-300:hsl(331,100%,77%);
	 --colors-pink-400:#ED64A6;
	 --colors-pink-500:hsl(331,93%,67%);
	 --colors-pink-600:#B83280;
	 --colors-pink-700:#97266D;
	 --colors-pink-800:#702459;
	 --colors-pink-900:hsl(331,77%,24%);
	 --colors-linkedin-50:#E8F4F9;
	 --colors-lavender-100:hsl(262,100%,95%);
	 --colors-lavender-200:hsl(263,100%,86%);
	 --colors-lavender-300:hsl(259,72%,73%);
	 --colors-lavender-500:hsl(259,60%,58%);
	 --colors-lavender-900:hsl(259,75%,22%);
	 --colors-lime-100:hsl(86,80%,86%);
	 --colors-lime-200:hsl(86,74%,76%);
	 --colors-lime-300:hsl(90,68%,65%);
	 --colors-lime-500:hsl(90,60%,52%);
	 --colors-lime-900:hsl(90,56%,23%);
	 --colors-primary-100:hsl(281,50%,94%);
	 --colors-primary-200:hsl(281,60%,87%);
	 --colors-primary-300:hsl(281,55%,69%);
	 --colors-primary-500:hsl(281,35%,51%);
	 --colors-primary-900:hsl(281,58%,25%);
    
    
}
	


body {
	 font-family: 'Lato', sans-serif;
	 color:#333;
	 line-height : 1.6;
	
}


ul {
	list-style-type: none;
}

a {
  text-decoration: none;
  color: #333;
}
h1,h2 {
	font-weight: 400;
	line-height: 1.4;
	margin: 10px 0;
}
p {
	margin: 10px 0;
}
img {
  width: 100%;
}
code,
pre {
  background: #333;
  color: #fff;
  padding: 10px;
}

.hidden {
  visibility: hidden;
  height: 0;
}
/*    Navbar  */


/* Sidebar Styles */
.sidebar {
    background-color: var(--card-bg);
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 05px;
    height: fit-content;
}

.sidebar h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    text-align: center;
    position: relative;
}

.sidebar h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    height: 3px;
    width: 50px;
    background-color: var(--accent-color);
    border-radius: 2px;
}

.sidebar-list {
    list-style: none;
    padding: 0;
}

.sidebar-list li {
    margin-bottom: 15px;
}

.sidebar-list a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: var(--secondary-color);
    font-size: 1.1rem;
    padding: 10px 15px;
    border-radius: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-list a:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.sidebar-list a i {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-light);
    border-radius: 50%;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.sidebar-list a:hover i {
    color: var(--text-light);
}




/*Docks Quotes main head*/
.docs-main .cardone .card {
	 background-color: var(--light-color);
	/* justify-content: flex-start;
	  align-items: flex-start;*/
	 justify-self: start;
}

/* Docs */
.docs-main h3 {
  margin: 20px 0;
  
}

.docs-head .flex {
  justify-content: space-between;
}
.docs-main .grid {
  grid-template-columns: 1fr 4fr;
  
  
}
.docs-main .navtwo li {
  font-size: 18px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px #ccc solid;
  
}
.docs-main a:hover {
  color:  var(--orange);
  
}


/*   BREADCRUMB  */
.breadCrumb {
  padding: 0;
  margin: 0;
  margin-top: 24px;
  overflow: hidden; }
 
 .breadCrumb li {
    float: left;
    font-size: .9rem;
    position: relative;
    list-style: none;
    color:#2c9e03;

    padding-right: 13px;
    margin-right: 8px; 
	}
    .breadCrumb li a {
     color:#1967d2;
        }
    .breadCrumb li:before, .breadCrumb li:after {
      content: '';
      position: absolute;
      width: 4px;
      height: 4px;
      border-top: 1px solid #999;
      border-right: 1px solid #999;
      transform: rotate(45deg);
      right: 0;
      top: 50%;
      margin-top: -2px; }
    .breadCrumb li:after {
      right: 3px; }
    .breadCrumb li:last-child {
      margin-right: 0;
      padding-right: 0; }
      .breadCrumb li:last-child:before, .breadCrumb li:last-child:after {
        display: none; }
/* Message Display Area */

.messg-main  {
	overflow: hidden;
}

.post blockquote,
.post blockquote p{
font-size: 18px;
color:  var(--black);
line-height: 1.5;
text-align: left;
}
.post blockquote p {
margin: 0;
}
.post blockquote {
position: relative;
padding: 0 0 0 46px;
border: none !important;
overflow: hidden;
}
.post blockquote:before{
color: #6eb48c;
content: '“';
font-family:  serif;
font-size: 64px;
font-weight: 900;
line-height: 1;
font-style: normal;
position: absolute;
top: -4px;
left: 0;

}

.post blockquote .author {
display: block;
font-size: 20px;
margin-top: 7px;
margin-bottom: 20px;
color: var(--orange);
font-style: normal;
font-weight: bold;
overflow: hidden;
text-align: left;
position: relative;
z-index: 1;
}
.post blockquote .author span {
position: relative;
display: inline-block;
padding: 0 10px 0 0;
}
.post blockquote .author span:after {
content: "";
position: absolute;
top: 50%;
width: 100px;
height: 2px;
background: var(--orange);
left: 100%;
opacity: 0.8;
}
/* Share*/

.post-social .sg-social i{
  margin: 10px;
  
}


.post .sg-social{
	padding-top:7px;
margin-left:10px;
text-align:center;
justify-content:center;
align-items:center;
display:flex;
font-size:12px;
text-transform:uppercase;
margin:0;
color:#444;
margin-top:8px;
padding-bottom:8px
}
.post-social .btn {
     text-align : center;
	margin: 18px  10px 10px;	
	
}




/*  footer   Section */ 

 /* Footer Styles */
        .footer {
            background-color: #396afc;
              color: #fff;
            
            padding: 3rem 2rem;
            font-size: 1rem;
        }

        .footer-container {
            max-width: 84rem; /* Equivalent to max-w-7xl */
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            text-align: center; /* This centers the text for mobile */
        }
        
        /* Heading Styles */
        .footer h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: #065666;
            margin-bottom: 1rem;
        }

        /* Paragraph Text */
        .footer p {
           color: #fff; /* Equivalent to slate-400 */
            line-height: 1.5;
        }

        /* Link Styles */
        .footer ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            align-items: center; /* This centers the list items */
        }
        
        .footer a {
            color: #fff;
            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
            text-decoration: none;
        }

        .footer a:hover {
            color: #818cf8; /* Equivalent to indigo-400 */
        }

        /* Social Icons */
        .social-icons {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center; /* This centers the social media icons */
        }

        .social-icons svg {
            width: 2rem;
            height: 2rem;
            color: #94a3b8;
        }

        .social-icons a:hover svg {
            color: #818cf8;
        }

        /* Copyright Section */
        .footer-copyright {
            margin-top: 3rem;
            text-align: center;
            color: #64748b; /* Equivalent to slate-500 */
        }
        
        /* Responsive Grid Layout */
        @media (min-width: 768px) { /* md breakpoint */
            .footer-container {
                grid-template-columns: repeat(2, 1fr);
                text-align: left; /* This realigns the text to the left for larger screens */
            }
            .footer-links ul, .footer-solutions ul {
                align-items: flex-start; /* This realigns the list items to the left */
            }
            .social-icons {
                justify-content: flex-start; /* This realigns the social icons to the left */
            }
        }
        
        @media (min-width: 1024px) { /* lg breakpoint */
            .footer-container {
                grid-template-columns: repeat(4, 1fr);
            }
            .footer-about {
                grid-column: span 2 / span 2;
            }
            .footer-social {
                grid-column: span 1 / span 1;
            }
        }



.fa-pinterest:hover {
  color: var(--primary-color);	
}

/*Icon */

.features-main .icons i{
    background: #fff;
    color:var(--primary-color);	
    cursor: pointer;
    text-align: center;
}

.features-main .icons i:hover{
    background: #fff;
    color:var(--orange);
}



/* Tablets and under */
@media (max-width: 768px) {
	.grid,
  .docs-main .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

	
 
  .docs-head,
  .docs-main .grid > *:first-child {
    text-align: center;
  }

 

  .docs-main .grid > *:first-child {
	
	grid-column : 1;
	grid-row : 2;
}
	
}

/* Mobile */
@media (max-width: 768px) {
	
	.docs-head {
		height: auto;
	}
	
	.docs-head.flex{
		flex-direction:column;
	}
	
	.post blockquote,
.post blockquote p{
font-size: 18px;
color:  var(--black);
line-height: 1.5;
text-align: left;
}
.post blockquote p {
margin: 0;
}
.post blockquote {
position: relative;
padding: 0 0 0 20px;
border: none !important;
overflow: hidden;
}
.author{
position: relative;
padding: 0 0 0 45px;
border: none !important;
overflow: hidden;
}
	
}